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出 版 说 明 


蝴 看 信息 科学 与 拉 术 的 迅速 发 展 ， 人 类 每 时 每 刻 部 会 面 对 层 出 不 穷 的 新 拉 术 和 新 概念 。 
坚 无 锋 问 ， 在 节 委 越 来 越 快 的 工作 和 生活 中 ， 人 们 需要 通过 阅读 和 和 学习 大 量 信息 丰 早 、 有 具备 
实践 指导 意义 的 图 书 来 获取 新知 识 和 新 技能 ， 从 而 不 断 提 高 目 喘 素质 ， 紧 跟 信息 化 时 代 发 展 
的 步伐 。 

众所周知 ， 在 计算 机 使 件 方 面 ， 高 性 价 比 的 解决 方案 和 痢 型 技术 的 应 用 一 直 备 受 育 睐 ; 
在 软件 拉 术 方面 ， 随 看 计算 机 软件 的 规模 和 复杂 性 与 日 俱 增 ， 软 件 技术 不 断 地 受到 挑战 ， 人 
们 一 直 在 为 寻求 更 先进 的 软件 技术 而 奋斗 不 止 。 目 前 ， 计 算 机 和 互联 网 在 社会 生活 中 日 益 普 
及 ， 竺 握 计 算 机 网 络 技术 和 理论 已 成 为 大 众 的 文化 需求 。 由 于 信息 科学 与 拉 术 在 电工 、 电 子 、 
通信 、 工 业 控 制 、 智 能 建筑 、 工 业 产 品 设计 与 制造 等 专业 领域 中 已 经 得 到 充分 、 广 泛 的 应 用 ， 
所 以 这 些 专业 领域 中 的 研究 人 员 和 工程 技术 人 员 越 来 越 坦 切 需 要 汲取 目 喘 领域 信息 化 所 布 来 
的 新 理念 和 新 方法 。 

针对 人 们 了 解 和 等 握 新 知识 、 新 拉 能 的 热切 期 符 ， 以 及 由 此 促成 的 人 们 对 语言 简洁 、 内 
容 序 实 、 融 合 实践 经 验 的 图 书 迫 切 需 要 的 现状 ， 机 械 工 业 出 版 社 适 时 推出 了 “信息 科学 与 扩 
术 从 书 ” 这 套 丛书 涉及 计算 机 软件 、 硬 件 、 网 络 和 工程 应 用 等 内 容 , 注重 理论 与 实践 的 结合 ， 
内 容 实用 、 层 次 分 明 、 语 言 流畅 ， 是 信息 科学 与 扩 术 领域 专业 人 员 不 可 或 缺 的 参考 书 。 

目前 ， 信 息 科 学 与 扩 术 的 发 展 可 谓 一 日 干 里 ， 机 械 工业 出 版 社 欢迎 从 事 信息 技术 方面 工 
作 的 科研 人 员 、 工 程 技术 人 员 积 极 参与 我 们 的 工作 ， 为 推进 我 国 的 信息 化 建设 做 出 页 献 。 
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)ZFARUUEOR, RKA m HTMLS 的 天 下 。 





对 于 当今 整个 Web 开发 领域 来 襄 ，HTML5 可 谓 最 热门 的 话题 之 一 。 在 已 故 革 有 果 公 司 掌 
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HTMLS 相 较 于 HTMLA 做 出 了 一 定 程度 的 修改 。 这 些 修改 包括 一 些 标 签 的 增加 / 删 减 、 
语法 结构 的 简化 以 及 新 的 API (Application Programming Interface, 应 用 程序 编程 接口 )。 例 
中 ， 如 条 要 定义 “ 头 部 ”区 块 


用 <div class/id="header"></div>。 





如 ，HTML5S 为 了 更 符合 内 容 与 表现 的 分 离 ， 增 加 了 header 这 样 的 专用 标签 。 而 在 HTMLA 
O gbe 








更 新 升级 。 罗 马 不 是 一 天 建成 的 ，HTMLS 要 想 完全 取代 Flash 还 有 很 长 的 路 要 走 。 
SE) 不 断 更 新 目 己 的 浏览 絮 ， 


与 Flash 相 比 ，HTMLS 的 优点 是 无 需 插 件 、 对 搜索 引擎 友好 ， 旦 在 性 能 与 稳定 性 方面 
的 表现 更 优 。 但 这 并 不 意味 看 Flash 在 短 时 间 内 会 被 HTMLS 完全 取代 。 目 前 ， 在 普及 率 、 
BS W3C 对 HTMLS 的 推进 ， 各 大 浏览 器 开发 公司 《如 谷歌 、 平 末 、Opera、Mozilla 
HTMLS 的 学 习 。 


兼容 性 以 及 开发 群体 方面 HTMLS 还 无 法 超越 Flash。 况 且 Adobe 公司 也 会 及 时 对 Flash 进行 

















以 提供 对 HIMLS 各 项 功能 的 支持 。 在 这 种 形势 下， 学习 
HTMLS 无 疑 相 当 于 掌握 了 未 来 的 Web 开发 利器 。 目 前 ， 许 多 Web 开发 人 员 正 在 转 问 
配备 了 大 量 的 实例 ， 可 操作 性 极 强 。 

如 下 : 


本 书 集 HTML5、CSS3、JavaScript 技术 于 一 体 ， 详 细 地 介绍 了 客户 端 程序 设计 。 书 中 


H È> H s 
全 书 共 分 为 21 章 ， 通 过 渐进 的 方式 介绍 HTML5, CSS3, JavaScript 技术 ， 内 容 安排 


第 1 章 介绍 HTMLS 的 新 特性 、 文 档 结 构 以 及 语义 化 标记 等 。 
第 2 章 介 绍 HTML 的 视频 和 音频 。 

第 3 章 介绍 HIMLS 表单 〈 包 括 表 单 类 型 、 
第 4 章 介 绍 如 何 创建 HTMLS 画布 。 


及 window 事件 等 )。 








表单 特性 以 及 表单 的 验证 等 )。 
第 5 ENA HTMLS 中 涉及 的 事件 〈 包 括 表 单 事 件 、 娆 介 事 件 、 鼠 标 事件 、 键 盘 事 件 以 
第 7 ENAERE RE (SVG)。 


第 6 章 介 绍 如 何 使 用 HTMLS 的 querySelector 与 querySelectorAll 77 22:3 J] X E4762 « 
第 8 章 介 绍 如 何 使 用 HTMLS Web Storage 实现 存储 。 





第 9 章 介 绍 如何 使 用 HTMLS Web SQL Database 实现 存储 。 
第 10 章 介 绍 如 何 使 用 HTMLS IndexedDB 实现 存储 。 
第 11 章 介 绍 HTMLS 文件 处 理 。 


第 12 章 介 绍 如 何 实 现 HTMLS 的 拖 放 功能 
第 13 章 介绍 HIMLS 地 理 定 位 。 


第 14 革 介 绍 HIMLS 通信 (包括 PostMessage、Server-Sent Events 以 及 WebSocket )。 
第 15 EITA HTML5 Web Worker. 


第 16 章 介 绍 HTMLS 离线 存储 。 

第 17 ZIA HTMLS Notifications 与 Progress 的 使 用 。 

第 18 革 介 绍 CSS3 各 种 属性 的 使 用 方法 。 

第 19 EA CSS3 的 选择 器 《包括 属性 选择 器 、 伪 类 选择 堪 以 及 兄弟 选择 需 等 )。 

第 20 ANA JavaScript 语法 基础 (包括 和 变量、 表达 式 、 流 程控 制 、 冰 数 、 内 置 对 得 
m 

第 21 章 介 绍 几 个 HTMLS 与 CSS3 开发 的 典型 范例 。 

作为 入 门 图 书 ， 本 书 涉 及 HTMLS. CSS3. JavaScript ZOMAR, mA P REW P A 
的 知识 点 。 笔 者 本 看 抓 章 点 、 抓 主流 的 原则 ， 详 细 介 绍 了 在 网 页 制作 中 最 实用 的 精髓 部 分 。 

由 于 写作 时 间 仓 促 ， 加 之 水 平 有 限 ， 书 中 难免 存在 不 足 或 不 当 之 处 ， 尽 请 广大 读者 批评 
JHIE « 
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第 1 音 HTMLS HR 
1.1 认识 HTML5 


HTML 的 上 一 个 版 本 诞生 于 1999 年 。 从 那 以 后 ，Web 世界 经 历 了 巨变 。 目 前 ，HTML5 
己 经 成 为 炙手可热 的 前 端 语言 。 

HTMLS 实际 指 的 是 包括 HTML. CSS 和 JavaScript 在 内 的 一 套 技 术 组 合 。 它 希望 能 够 
减少 浏览 器 对 于 主 定 网 络 应 用 服务 插件 (plug-in-based rich internet application; RIA), AH 
Adobe Flash. Microsoft Silverlight 以 及 Oracle JavaFX 的 依赖 ， 并 且 提 供 更 多 能 有 效 增强 网 络 
应 用 的 标准 集 。 

HTMLS 是 W3C 5j WHATWG FEKAR, KA HTML, XHTML 以 及 HTML DOM 
的 新 标准 。HTMLS5 仍 处 于 完善 之 中 。 不 过 ， 大 部 分 现代 浏览 器 已 经 具备 了 某 些 HTMLS 
XN. 


|12 HTML5 新 特性 


1.2.1 新 的 元 素 


HTMLS 提供 了 一 些 新 的 元 素 和 属性 ， 一 些 过 时 的 HTML4 标记 将 被 取消 ， 其 中 包括 纯 
粹 用 做 显示 效果 鸭 标 记 ， 如 <font> 和 和 <center>， 因 为 它们 已 经 被 CSS 取代。 
HTMLS 中 定义 的 新 元 素 见 表 1-1。 



































表 1-1 HTML5 中 的 新 元 素 


标签 说 。 明 标签 LEES 
cades So 

Em ET 

<command> 定义 任何 类 型 的 任务 的 进度 

<datalist> | 定义 F 拉 列表 | sp | 定义 若 浏 览 器 不 支持 ruby 元 素 则 显示 的 内 容 
<details> 定义 ruby 注释 的 解释 

<embed> | 定义 外 部 交互 内 容 或 插件 <ruby> 定义 ruby 注释 


<rp> 
<rt> 
<figcaption> | 定义 figure 元 素 的 标题 定义 section 











<figure> 定义 媒介 内 容 的 分 组 以 及 它们 的 标题 «source» 定义 媒介 源 
<hgroup> | 定义 文档 中 的 section 的 信息 定义 视频 
Sexe | 定 X4 成 | 
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1.2.2 ”新 的 API 


除了 原先 的 DOM 接口 ，HTML5 增加 了 更 多 样 化 的 API。 下 面 是 HTMLS 中 一 些 有 趣 的 
新 特性 。 

(1) Canvas API: 动态 生成 图 形 、 图 表 、 图 像 以 及 动画 。 

(2) Audio 与 Video API: 为 开发 者 提供 了 一 侠 通 用 的 、 集 成 的 、 脚 本 式 的 处 理 首 频 与 视 
频 的 API， 而 无 第 安装 任何 插件 。 

(3) Form API: 包含 多 个 狐 的 表单 输入 类 型 。 这 些 狐 特性 提供 了 更 好 的 输入 控制 和 
AS E. 

(4) Web Storage API: (EJ mu Vias E BEIDE NEA TRA KEHF JT 
站 点 还 是 关闭 浏览 器 后 再 次 打开 时 存储 数据 都 会 存在 。 

(5) Communication API: 构建 实时 (real-time〉 和 路 源 〈cross-origin) 通信 。 

(6) Geolocation API: 用 户 可 共享 地 理 位 置 ， 并 在 Web 应 用 的 协助 下 享用 位 置 感知 
服务 。 

(7) Drag and Drop API: 通过 鼠标 对 目标 元 素 进行 拖 放 操作 。 

(8) File API: 处 理 文件 上 传 和 操纵 文件 。 

(9) Web SQL Database API: 人 允许 应 用 程序 通过 一 个 异步 的 JavaScript 接口 访问 数 
Hi E o 


13 ”文档 结构 与 字符 集 


说 到 文档 结构 ， 请 读者 站 和 完 看 一 下 HTML 的 文档 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"— 


是 否 既 肪 烦 又 难 记 ? 如 果 是 这 样 的 话 ， 现 在 该 切换 到 新 的 HIMLS 文档 结构 了 。HTML5 
文档 非常 容易 建立 ， 上 只 需要 改变 文档 头 部 的 DOCTYPE 声明 即 可 。 


«IDOCTYPE html» 


E DOCTYPE 一 样 ， 字 符 集 的 声明 也 简化 了 。 原 来 的 声明 是 












































«meta http-equiv-"Content-Type" content="text/html; charset=gb2312" /> 
现在 简化 为 


«meta charset-gb23 12" /> 


| 1.4 语义 化 标记 


HTMLS 不 仅 把 现 有 的 标记 变 得 更 简洁 ， 还 引入 了 很 多 新 的 语义 化 标记 元 素 。Google 分 
析 了 上 百 万 的 页 面 ， 发 现 div 标签 的 ID 名 称 重 复 量 很 大 ， 如 程序 员 习 惯 将 页 脚 定 义 为 <div 








1d= footer >， 


WIR. 


JU X M 
header 


section 
article 


nav 
aside 


footer 


HTML5 
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所 以 HTMLS 51A YAIRE NERE. K 1-2 列 出 了 新 增 的 语义 化 标 


表 1-2 HTMLS5 新 增 的 语义 化 标记 元 素 
说 明 
定义 文档 的 页 眉 ，header 元 素 可 以 用 来 包 囊 搜索 框 、 目 录 列 表 或 任何 相关 的 logo 
定义 文档 中 的 节 ， 比 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 
定义 外 部 的 内 容 。 外 部 内 容 可 以 是 来 自 一 个 外 部 的 新 闻 提 供 者 的 一 篇 新 的 文章 ， 或 者 是 来 自 blog 的 文 
本 ， 或 者 是 来 自 论坛 的 文本 ， 还 可 以 是 来 自 其 他 外 部 源 的 内 容 
定义 导航 链接 的 部 分 
定义 article 以 外 的 内 容 。aside 的 内 容 应 该 与 article 的 内 容 相关 。aside 的 内 容 可 用 做 文档 的 侧 栏 
定义 section 或 document 的 页 脚 。 它 包含 创作 者 的 姓名 、 文 档 的 创作 日 期 以 及 联系 信息 


的 语义 化 标记 元 素 改 变 了 以 往 单 纯 使 用 table 和 div 布局 的 模式 ， 构 成 了 























HTMLS 文档 的 基本 结构 。 


代码 清单 1-1: 语义 化 标记 元 素 的 网 页 整体 布局 的 实例 
<!DOCTYPE html> 


<html> 
<head> 


<meta charset="utf-8" /> 
<title>eHTML5</title> 
<link rel="stylesheet" href="15-1.css"> 


</head> 
<body> 
<header> 


<hl>Header</h1> 


</header> 


一 -11 


«div id="container"> 


«nav 


<h3>Nav</h3> 

«a hre 伍 "> 狐 闻 中 心 </a> 
«a hre 伍 "> 产品 展示 </a> 
«a hre 伍 "> 人 才 招 聘 </a> 
«a hre 伍 "> 关于 我 们 </a> 


</nav> 


<section> 
<h2>section</h2> 
<article> 
<header> <h1>Article Header</h1> </header> 


<p>An article should make sense on its own and it should be possible to distribute it 


independently from the rest of the site. </p> 
«footer» <h2>Article Footer</h2> </footer> 
«article 
«article 
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«header» <hl>Article Header</h1> </header> 
<p>The article tag is new in HTMLS.The article tag specifies independent, self-contained content. </p> 
<p>An article should make sense on its own and it should be possible to distribute it 
independently from the rest of the site. </p> 
«footer» «h2»Article Footer</h2> «/footer- 
«article» 
</section> 
<aside> 
<h3>Aside</h3> 
<p>The Aside tag is new in HTML5.The aside tag defines some content aside from the content 
it is placed in. The aside content should be related to the surrounding content. </p> 
</aside> 
<footer> <h2>Footer</h2> </footer> 
</div> 
</body> 
</html> 


构建 完 程序 后 ， 下 面 为 代码 1-1 应 用 样式 表 。 本 实例 中 使 用 了 CSS3 的 一 些 新 的 特性 ， 
例如 圆 角 处 理 。CSS3 同 HTMLS 一 样 仍 处 于 开发 阶段 ， 并 有 逐渐 被 大 多 数 浏览 器 所 支持 。 
下 面 是 代码 1-1 对 应 的 CSS 文件。 


body { 
background-color:white; 





font-family: Tahoma, Geneva, sans-serif; 
margin: Opx auto; 
border:solid; 
border-color:2006; } 

header 1 
background-color: #00F; 
display:block; 
color:#FFF; 
text-align:center; } 

hl { 
font-size: 72px; 
margin: 0px; } 

h2 { 
font-size: 24px; 
margin: 0px; 
text-align:center; 
color: #FFF; } 

h3 ( 
font-size: 18px; 
margin: 0px; 
text-align:center; 
color: #FF0; | 

nav { 
display:block; 


HTMLS 概述 


width:20%; 
float:left; } 
nav a:link, nav a:visited { 
display: block; 
border-bottom: 3px solid #fff; 
padding: 10px; 
text-decoration: none; 
font-weight: bold; 
margin: 5px; } 
nav a:hover { 
color: #F00; 
background-color: ZFF0; } 
nav h3 { 
margin: 15px; 
color: #FFF; } 
section h3 { 
margin: 15px; 
color: #FFF; } 
#container { background-color: #888; } 
section { 
display:block; 
width:60% ; 
float:left; 
background-color: #0F0; | 
article { 
background-color: #eee; 
display:block; 
margin: 10px; 
padding: 10px; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; } 
article header { 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
padding: 5px; } 
article footer { 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
padding: 5px; } 
articlehl { font-size: 18px; } 
aside { 
display:block; 
width:20%; 


À$1*X 
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float:left; } 
aside h3 { 
margin: 15px; 
color: white; } 
aside p { 
margin: 15px; 
color: #0F0; 
font-weight: bold; 
font-style: italic; } 
footer { 
clear: both; 
display: block; 
background-color: #00F; 
color:#FFFFFF; 
text-align:center; 
padding: 15px; } 
footer h2 { 
font-size: 14px; 
color: white; } 
a{ color: #00F; j 
a:hover {text-decoration: underline; } 


图 1-1 是 代码 1-1 应 用 了 CSS3 后 ， 在 页 面 中 的 实现 效果 。 从 图 中 不 难看 出 各 个 语义 化 











标记 元 又 在 构建 页 面 布局 中 的 作用 。 


Header 


Aside 


Article Header The Aside 
tag is new 


D 

HTMI 5, The 
aside tag 
defines 
some 
content 
aside from 
the content 
it is placed 
in, The 

The article tag is new in HTMLS. The article tag aside 
specifies independent, self-contained content. content 


should be 
An article should make sense on its own and it related to 


should be possible to distribute it independently the 
from the rest of the site. 


An article should make sense on its own and it 
should be possible to distribute it independently 
from the rest of the site. 


Article Footer 


Article Header 


surrounding 


z content, 
Article Footer 


Footer 











图 1-1 语义 化 标记 元 素 构建 布局 效 琳 
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| 1.5 检测 技术 


由 于 HTMLS 的 新 规范 还 在 完善 之 中 ， 一 些 老 的 浏览 器 对 HTMLS 的 特性 还 不 支持 或 只 
有 部 分 1c Fir Eos uL 93 ER] SCRETEXIET Tw DU A AR AERIS A Pes T UU A H T scd 
DU Vd di 8 xchEAKTI HIMLS 特性 的 方法 : 

(1) 使 用 Modernizr 检测 库 。 

(2) 检测 全 局 对 象 是 否 拥有 特性 属性 。 

(3) 创建 一 个 元 素 ， —A—— DOM 对 象 是 否 拥有 特定 的 属性 。 

(4) 创建 一 个 元 素 ， 给 这 个 元 素 的 DOM 对 象 设 定 特定 的 属性 值 ， 然 后 检查 浏览 器 是 
保留 了 该 属性 值 。 

下 面 以 使 用 Modernizr 检测 库 检 测 为 例 进行 说 明 ， 其 他 检测 方法 将 在 后 面 章节 中 进一步 
介绍 。 

Modernizr 是 一 个 开源 的 JavaScript 库 ， 用 于 检测 浏览 器 是 否 文 持 HTML5 和 CSS3 的 特 
性 。 可 以 根据 浏览 器 对 HTMLS 和 CSS3 的 支持 程度 提供 更 加 便捷 的 前 端 优化 方案 。 

可 以 从 www.modernizr.com 下 载 Modernizr 的 最 新 稳定 版 。Modernizr 的 使 用 非常 简单 ， 
只 需 在 <scrip 亿 标签 中 加 载 Modernizr 库 ， 并 把 该 标签 放 在 <head> 标 签 下 。Modernizr 在 运 
行 时 会 创建 一 个 Modernizr 的 全 局 对 象 ， 该 对 象 会 为 每 个 需要 检测 的 特性 创建 一 个 布尔 型 
的 属性 。 

下 面 以 检测 当前 浏览 嚣 是否 文 持 Canvas 为 例 ， 说 明 如 何 使 用 Modernizr 特性 检测 库 。 代 
人 码 如 下 : 


















































<!DOCTYPE HTML> 
<html> 
<head> 
«meta http-equiv-"Content-Type" content="text/html; charset=utf-8"> 
<title>Modernizr 特性 检测 </title> 
«script src=""modernizr.custom.]s"" ></script> 
<script type=" text/javascript" > 

if(Modernizr.canvas){ 

alert(" Your browser supports canvas!!"'); 

}else{ alert("Sorry, Your browser does not support canvas!'); ) 
</script> 
</head> 
<body> 
</body> 
</html> 





529 使 用 视频 与 音频 元 素 


2.1 设置 视频 元 素 





直到 现在 ， 仍 然 疫 有 在 网 页 上 显示 视频 的 标准 ， 大 多 数 视 频 是 通过 插件 《比如 Flash) 
来 显示 的 。 然 而 ， 并 非 所 有 浏览 噩 都 有 同样 的 插件 。 
2.1.1 “” 击 明 视频 元 素 


HTMLS 规定 了 一 种 通过 video 元 素来 包含 视频 的 标准 方法 。 目 前 ，video 7623 Sc — t 
视频 格式 ， 见 表 2-1。 





表 2-1 video 元 素 支 持 的 三 种 视频 格式 


视频 格式 格式 说 明 e EE 
MPEG4 | if H.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 X 

WebM | 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM fF | 40+ | 6o | x | x | 105 

Ogg 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 | 10.5+ 


基本 语法 : 





<video src="" controls="controls"></video> 


通过 controls 属性 可 以 为 视频 添加 播放 、 和 暂停 和 音量 功能 。 当 浏览 器 不 支持 video 元 素 
时 ， 可 以 通过 在 <video> 与 </video> 之 间 插 入 内 容 的 方法 提示 用 户 。 例 如 : 





«video src-"movie/movie.ogg" width="320" height="240" controls="controls"> 


TER] DU] UAI S RE video 标签 ! 
«/video» 


video 标签 中 允许 散 套 多 个 source LZR. source 元 素 可 以 链接 不 同 的 视频 文件 。 浏 览 回 
将 使 用 第 一 个 可 识别 的 格式 。 例 如 : 


«video width="320" height="240" controls="controls"> 


LM 





—M 


«source src-"movie/movie.ogg" type-"video/ogg"- 


«source src-"movie/movie.mp4" type-"video/mp4"- 


你 的 浏览 器 不 文 持 video 标签 ! 
</video> 
用 户 可 以 通过 video 元 素 的 属性 控制 视频 播放 ， 包 括 是 否 循环 播放 、 设 置 播放 喜 的 宽度 
以 及 高 度 等 。video 的 属性 见 表 2-2。 
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表 2-2 video 元 素 的 属性 


局 二 “性 属性 值 fü — XX 
autoplay autoplay 如 果 出 现 该 属性 ， 则 视频 在 驶 绪 后 马上 播放 
controls controls 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按钮 
height pixels 设置 视频 播放 器 的 蜗 度 
loop loop 如 果 出 现 该 属性 ， 则 当 媒 介 文 件 完成 播放 后 再 次 开始 播放 

如 果 出 现 该 属性 ， 则 视频 在 页 和 面 加 载 时 进行 加 载 ， 并 预备 播放 
如 果 使 用 "autoplay"， 则 忽略 该 属性 
要 播放 的 视频 的 URL 
width pixel 设置 视频 播放 器 的 宽度 


2.1.2 DUAE A Sch PERSE 
检测 浏览 颖 是 人 奋 文 持 video wR, BEuILAfEH] DOM (Document Object Model， 文 档 对 
象 模 型 ) 的 公共 属性 快速 检测 ， 也 可 以 使 用 Modernizr 库 检测 。 








preload preload 


a 
一 
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代码 清单 2-1: 通过 动态 创建 video 元 素 ， 并 检测 canPlayType 函数 是 否 存在 来 检测 浏览 器 的 支持 性 
«IDOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function support Video(){ 
if('document.createElement('video').canPlay Type) | 
document.getElementById("checkResult").innerHTML-"OK' Full support!"; 
} else { document.getElementById("checkResult").innerH TML-"Sorry. No video support." } 
j 
</script> 
</head> 
<body > 
<div id="checkResult" > 
«button onclick="support_Video()" >Check</button> 
</div> 
</body> 
</html> 


ZUR UA] A aE LAE, HAEE video 元 素 ， 然 后 检测 video 元 又 的 
DOM 对 象 是 否 拥有 特定 的 方法 ， 同 时 调用 这 个 方法 并 检查 它 的 返回 值 。 











代码 清单 2-2: 检测 浏览 器 是 否 支 持 菏 种 视频 格式 
function support Video(){ 
if(!!'document.createElement('video').canPlayType)| 
var video check-document.createElement(" video"); 
ogg check-video check.canPlayType(' video/ogg; codecs-"theora, vorbis"); 
if(logg check)1 
h264 check-video check.canPlayType('video/mp4; codecs-"avc1.42E01E, mp4a.40.2"); 
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if (!h264_check){ 
document.getElementById("checkResult").innerHTML="Sorry. No video support." 
} else ( 
if (h264 check--"probably")1 
document.getElementById("checkResult").innerHTML-"OK! Full support!"; 
} else{ document.getElementById("checkResult").innerH TML-"Well. Some support."; } 


j 
} else ( 
if(ogg check--"probably")1 
document.getElementById("checkResult").innerHTML-"OK' Full support!"; 
}else{ document.getElementById("checkResult").innerHTML-"Well. Some support.";s | 


j 
} else ( document.getElementById("checkResult").innerH TML-"Sorry. No video support." | 


j 


该 方法 通过 document.createElement("video") 创 建 了 一 个 虚拟 的 video WR, JJa US H 
canPlayTypeQ77 1X. 


var video check-document.createElement("video"); 
ogg check-video check.canPlayType( video/ogg; codecs-"theora, vorbis"); 


调用 canPlayType0) 方 法 不 会 返回 一 个 布尔 类 型 的 值 ， 而 是 一 个 字符 串 ， 它 的 值 可 能 是 : 

E probably: 表示 浏览 器 有 充分 的 把 握 播放 该 格式 视频 。 

E maybe: 表示 浏览 占 也 许 能 播放 该 格式 视频 。 

E o". 表示 浏览 器 不 可 能 播放 该 格式 视频 。 

如 末 谈 者 不 想 编号 检测 方法 ， 则 可 以 直接 使 用 Modernizr 库 来 检测 浏览 左 是 合 文 持 
HTMLS 的 video 元 素 。 代 人 码 如 下 : 


«script src-"modernizr.custom.]s" ></script> 

















«script type-"text/Javascript" 
if( Modernizr.video) ( 
alert("Y our browser supports video!!"); 
}else{ alert("Sorry, Your browser does not support video!"); } 


</script> 
EPER, AD RAEE — i A XJ ds e a L APA o O AER E EA A FF 
video 7Gz&Jci, TEE 2 EITEM. 








代码 清单 2-3: 检测 是 否 文 持 示 种 视频 格式 

«script type-"text/javascript" 
if(Modernizr.video) 
if( Modernizr.video.ogg)1 

alert(" Your browser supports video ogg!!"); 
velse if( Modernizr.video.h264) | 
alert("Y our browser supports video h264!!"); 
j 
:else1 alert("Sorry, Your browser does not support video!"); } 


</script> 
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EZ 设置 音频 元 素 


与 视频 一 样 ， 到 目前 为 止 ， 仍 然 不 存在 一 项 在 网 页 上 播放 音频 的 标准 。HTMLS 规定 了 
一 种 通过 audio 元 素来 包含 音频 的 标准 方法 。 
当前 ，audio 元 素 支 持 三 种 音频 格式 ， 见 表 2-3. 














表 2-3 audio 元 素 支 持 的 三 种 音频 格式 


基本 语法 : 


i LM 


«audio src controls-"controls"»«/audio» 


通过 controls 属性 可 以 为 音频 添加 播放 、 和 暂停 和 音量 功能 。 当 浏览 器 不 文 持 audio 元 素 
时 ， 可 以 通过 在 <audio> 与 </audio> 之 间 插 入 内 容 的 方法 提示 用 户 。 此 外 ，audio 标签 中 人 允许 
KELA source JLZ. source 元 素 可 以 链接 不 同 的 首 频 文件 。 浏 览 器 将 使 用 第 一 个 可 识别 的 
格式 。 例如 : 





«audio controls="controls"> 


—M 


«source src= 


—M 


song.ogg" type-"audio/ogg"- 


—M 


«source src-"song.mp3" type-"audio/mpeg"- 
TER] DU] Al SF audio 控件 ! 


</audio> 


audio 元 素 的 属性 作用 与 video 元 素 基 本 相同 ， 见 表 2-4. 





表 2-4 audio 元 素 的 属性 





a 如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 
et 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按钮 
joo 如 果 出 现 该 属性 ， 则 每 当 音频 结束 时 重新 开始 播放 
如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 
odis 如 果 使 用 “autoplay”， 则 忽略 该 属性 


src url 要 播放 的 音频 的 URL 


| 2.3 媒体 特性 


HTMLS 的 video 元 素 和 audio 元 素 均 继承 自 HTMLS 的 media 元 素 ， 同 时 也 继承 了 
media 元 素 的 方法 和 特性 。 可 以 通过 脚本 对 video M audio 进行 自 定义 设置 。 


11 


HTML5, CSS3, JavaScript 开发 手册 


1. HTML5 的 媒体 属性 

HTMLS 包括 以 下 媒体 属性 : 

(D eror: 只 斌 属性 ， 在 发 生 和 错误 的 情况 下 返回 错误 代码。 如 果 没 有 出 错 ， 则 返回 null. fH 
误 状 态 共 有 4 个 可 能 值 。MEDIA ERR ABORTED (数字 值 为 1) 表示 用 户 终止 ， MEDIA - 
ERR NETWORK 〈 数 字 值 为 2) 表示 网 络 错误 ; MEDIA ERR DECODE 〈 数 字 值 为 3) 表示 媒 
体 解 码 错误 ; MEDIA ERR SRC NOT SUPPORTED (数字 值 为 4) 表示 视频 格式 不 支持 。 

(2) currentSrc: 只 试 属性， 返回 当前 正在 播放 的 媒体 资源 URL. 

(3) sre: 返回 或 设置 当前 资源 的 URL« 

(4) networkState: 只 谈 必 性， 返回 媒体 的 网 络 状 态 ， 包 括 4 个 可 能 值 。NETWORK - 
EMPTY (数字 值 为 0) 表示 尚未 初始 化 : NETWORK IDLE (数字 值 为 1) 表示 加 载 完成 ， 
网 络 容 用 ; NETWORK LOADING (数字 值 为 2) 表示 视频 加 载 中 ; NETWORK NO 
SOURCE (HAFEN 3) 表示 加 载 失 败 。 

(5) preload: 可 读 写 属性 。 返 回 媒 体 标签 的 preload 属性 值 ， 或 者 对 其 进行 赋值 以 改变 
媒介 标签 的 preload 属性 值 。 

(6) buffered: 只 读 属 性 ， 返 回 一 个 TimeRanges 对 象 ， 人 确认 浏览 器 已 经 绥 存 媒体 文件 。 

(7) readyState: 只 读 属 性 ， 返 回 媒介 当前 播放 位 置 的 束 绪 状态 ， 包 括 5 个 可 能 值 。 
HAVE NOTHING (AFEN 00 表示 当前 播放 位 置 无 有 效 媒介 资源 ; HAVE METADATA 
(数字 值 为 1) 表示 加 载 中 ， 媒 介 资 源 确认 存在 ， 但 当前 位 置 没 有 能 够 加 载 到 有 效 媒 介 数 据 进 
行 播放 ; HAVE CURRENT DATA 〈 数 字 值 为 2) 表示 已 获取 当前 播放 数据 ， 但 没有 足够 的 
数据 进行 播放 ，HAVE FUTURE DATA (ATEN 3) 表示 已 获取 后 续 播 放 数 据 ， 可 以 进行 
播放 ; HAVE ENOUGH DATA (数字 值 为 4) 表示 可 以 进行 播放 ， 且 浏览 器 确认 媒体 数据 以 
某 一 种 速度 进行 加 载 ， 可 以 保证 有 足够 的 后 续 数 据 进行 播放 ， 而 不 会 使 浏览 器 的 播放 进度 赶 
上 加 载 数据 的 末 病 。 

(8) seeking: 只 读 属 性 ， 返 回 一 个 布尔 值 ， 表 明 浏 览 絮 是 否 正 在 请 求 数据 。true 表示 浏 
览 器 正在 请 求 数据 ;，false 表示 浏览 器 已 停止 请 求 数据 。 

(9) currentTime: 可 读 写 属性 ， 返 回 当前 媒体 的 播放 位 置 ， 或 者 对 其 赋值 以 改变 媒体 的 
播放 位 置 。 该 值 表 示 时 间 ， 单 位 为 秒 。 

(10) startTime: 只 读 必 性， 返回 媒介 文件 播放 有 的 开始 位 置 ， 通 党 为 0。 访 值 表示 时 间 ， 
单位 为 秒 。 

(11) duration: 只 恋 必 性， 返回 媒介 文件 总 的 播放 时 长 。 该 值 表 示 时 间 ， 单 位 为 秒 。 

(12) played: 只 恋 必 性， 返回 一 个 TimeRanges 对 象 ， 表 示 浏 览 堪 已 播放 的 媒体 资源 范围 。 

(13) paused: 只 读 属 性 ， 返 回 一 个 布尔 值 ， 表 示 媒 体 是 否 暂 停 播 放 。true 表示 媒体 暂停 
播放 ; false 表示 媒体 正在 播放 。 

(14) ended: 只 恋 必 性， 返回 一 个 布尔 值 ， 表 示 媒 体 播 放 是 否 已 结束 。true 表示 媒体 已 
经 播放 完毕 ，false 表示 还 未 播放 完毕 。 

(15) defaultPlaybackRate: 可 读 必 性， 返回 媒体 默认 的 播放 速率 ， 或 对 其 赋值 以 改变 媒 
介 的 默认 播放 速率 。 

(16) playbackRate: 可 该 写 必 性， 返回 当前 的 媒体 播放 速率 ， 或 对 其 威 值 以 改变 当前 的 
媒体 播放 速率 。 
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(17) autoplay: 可 该 与 属性 ， 返 回 一 个 布尔 值 ， 表 示 当 前 媒体 是 否 设 置 了 目 动 播放 。 
true 表示 当前 媒体 为 目 动 播放 ;，false 表示 非 目 动 播放 ， 或 对 其 赋值 以 设置 是 否 上 自动 播放 。 

(18) loop: 可 谈 写 属性 ， 返 回 一 个 布尔 值 ， 表 示 当 前 媒介 是 否 设置 了 循环 播放 。true 表示 
"ABI AT Ve EL I RPG false 表示 没有 设置 循环 播放 ， 或 对 其 赋值 以 设置 是 售 循 环 播放 。 

(19) controls: 可 读 写 属性 ， 返 回 一 个 布尔 值 ， 表 示 当 前 媒体 是 人 否 使 用 了 浏览 右上 默认 的 
播放 欣 制 栏 。true 表示 已 经 加 载 控 制 柱 ，false 表示 没有 加 载 控制 栏 ， 或 对 其 赋值 以 设置 是 否 
使 用 浏览 器 默认 的 播放 控制 栏 。 

(20) volume: 可 恋 写 属性 ， 返 回 当前 媒介 的 音量 值 ， 或 对 其 赋值 以 改变 媒介 的 播放 音 
量 ， 范 围 为 0 一 1。0 为 静音 ;1 为 最 大 音量 。 

(21) muted: 可 旋 写 属性 ， 返 回 一 个 布尔 值 ， 表 示 当 前 媒介 播放 是 否 开 局 静音 。true 表 
示 没 有 开局 静音 ，false 表示 静音 ， 或 对 其 赋值 以 设置 播放 是 合 静 音 。 

2. HTML5 的 媒体 方法 

HTMLS 包括 以 下 媒体 方法 : 

(I) playO: 加 载 并 播放 媒体 文件 ， 除 非 媒 体 已 经 暂停 或 在 其 他 位 置 了 ， 并 将 paused 属 
性 值 强制 设置 为 false。 

(2) pause): 暂 候 处 于 播放 状态 的 媒体 ， 并 将 paused 属性 值 强 行 设 为 true. 

(3) loadO: MAWAL, FH playbackRate 的 值 强 行 设 为 defaultPlaybackRate 的 值 ， 
且 强 行将 media.error 的 值 设 为 null。 

(4) canPlayType (type): 测试 浏览 器 是 否 文 持 特定 的 媒体 类 型 ， 返 回 3 个 可 能 值 。 空 
字符 串 表 示 浏 览 器 不 支持 此 种 媒体 类 型 ， maybe 表示 浏览 器 可 能 支持 此 种 媒体 类 型 ，; 
probably 表示 浏览 堪 确定 文 持 此 种 媒体 类 型 。 

了 解 了 媒体 的 属性 和 方法 后 ， 下 面 通过 实例 来 进一步 说 明 。 

在 video 7628 4 audio 元 素 中 指定 controls 属性 ， 便 可 在 页 面 上 以 默认 的 方式 进行 媒体 播 
放 。 当 不 指定 controls 属性 时 ， 播 放 时 将 不 会 出 现 控制 界面 。 但 是 可 以 通过 JavaScript LJ El 
定义 的 方式 控制 媒体 的 播放 。 


代码 清单 2-4: 通过 按钮 控制 媒体 的 播放 
<IDOCTYPE HTML> 
<html> 
<head> 


«script type="text/Javascript"> 
























































function playSound(){ 
var cusVideo=document.getElementByld("clickVideo"); 
var clickButton-document.getElementById("button"); 
if(cusVideo.paused) | 
cusVideo.play(); 
clickButton.innerHTML- "£r f": 
:else1 
cusVideo.pause(); 
clickButton.innerHTML-" 487A"; 
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j 
</script> 
</head> 
<body> 
«video id="clickVideo" src-"movie/movie.ogg" width="320" height="240" > 
你 的 浏览 器 不 文 持 video 标签 ! 
</video><br> 
«button id="button" onClick="playSound0O"> 播 放 </button> 
</body> 
</html> 


第 3 齐 表单 元 素 与 相关 届 性 


表单 对 于 读者 来 说 并 不 阳 生 。 当 读者 浏览 网 页 时 ， 表 单 可 以 用 来 收集 读者 的 信息 ;而 谈 
者 也 可 以 通过 填写 表单 提交 一 些 注 册 信 息 。 表 单 驳 是 网 页 中 站 点 服务 器 处 理 的 一 组 数据 和 输入 
域 ， 用 于 实现 网 页 交互 功能 。 

表单 最 根本 的 目的 是 用 来 收集 信息 ， 并 将 信息 提交 给 服务 器 进行 处 理 。 通 党 每 个 表单 痢 
征 由 文本 框 和 提交 鬼 钮 组 成 的 。 制 作 表 单 需要 利用 表单 集 功 能 ， 表 单 集 包含 窗口 小 部 件 ， 也 
称 控件 。 






























































3.1 输入 类 型 





HTMLS Web Forms 是 对 目前 HTML4 Web Forms 的 全 面 提升 。 它 在 保持 了 简便 易 用 特性 
的 同时 ， 还 增加 了 许多 内 置 的 控件 或 者 控件 属性 来 满足 用 户 的 需求 ， 同 时 减少 了 开发 人 员 的 编 
程 操 作 。HTMLS 拥有 多 个 新 的 表单 输入 类 型 ， 这 些 新 类 型 提供 了 更 好 的 输入 控制 和 验证 。 

1. email 类 型 


email 表单 用 于 包含 Email 地 址 的 输入 域 。 在 提交 表单 时 ， 会 自动 验证 email 域 的 值 。 例 如 : 




















«form action=" demo email.aspx" method=" get"> 


LM =i 


E-mail: <input type-"email" name-"user email" /><br /> 
«input type="submit" /> 


</form> 
当 用 户 提 交 非 email 类 型 值 时 ，email 表单 会 进行 验证 提示 ， 如 图 3-1 Br. 
2. url 类 型 


url 类 型 用 于 包含 URL 地 址 的 输入 域 。 在 提交 表单 时 ， 会 目 动 验证 url 域 的 值 。 例 如 : 





«form action="demo url.aspx" method="get"> 
URL: «input type-"url" name-"user url" /><br /> 


«input type="submit" /> 
</form> 


当 用 户 提 区 非 url 类 型 值 ，url 表单 会 进行 验证 提示 ， 如 网 3-2 所 示 。 


| URL: | Urlform 
E-mail: (EREE | 


EF] = dL. L&É — [提交 | 
请 给 入 一 个 有 效 的 电子 邹 件 地 址 | 请 输入 网 址 。 


图 3-1 email 验证 类 型 图 3-2 url 验证 类 型 
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3. number 类 型 
number 类 型 用 于 包含 数值 的 输入 域 。 此 外 ， 还 能 够 对 所 接受 的 数字 大 小 范围 进行 限 
定 。 例 如 : 


<form action="demo number.aspx" method="get"> 


—M 


数值 : «input type-" number" name-"points" min-"1" max-"10" /> 


—M 


«input type="submit" /> 
</form> 
可 以 使 用 下 和 面 的 属性 来 规定 对 数学 类 型 的 限定 。 
B max: 规定 允许 的 最 大 值 。 
B min: 规定 允许 的 最 小 值 。 
B step: 规定 合法 的 数字 步 长 (如果 step="3"， 则 合法 的 数 是 -3,0,3,6 等 )。 
B value: 规定 默认 值 。 
number 类 型 表单 效果 如 图 3-3 所 未 。 
4. range 类 型 
range 类 型 用 于 应 该 包含 一 定 范围 内 数字 值 的 输入 域 。range 类 型 显示 为 滑动 条 。 此 外 ， 
还 能 够 对 所 接受 的 数字 进行 限定 。 例 如 : 














«form action="/demo range.aspx" method="get"> 


—M —M 


TH: «input type-"range" name-"points" min-"1" max-"10" /> 


—M 


«input type="submit" /> 
</form> 
range 表单 可 以 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 。 
E max: 规定 允许 的 最 大 值 。 
E min: 规定 允许 的 最 小 值 。 
B step: 规定 合法 的 数字 步 长 〈 如 果 step="3"， 则 合法 的 数 是 -3,0,3,6 等 )。 
E value: 规定 默认 值 。 
range 类 型 表单 效 采 如 图 3-4 Bras. 














图 3-3 number 验证 类 型 图 3-4 range 验证 类 型 


5. Date Pickers 类 型 

在 HTMLA 中 并 未 提供 日 期 选择 器 控件 ， 因 此 在 网 页 设计 中 通常 使 用 JavaScript 的 日 期 
控件 。HTML5 拥有 多 个 可 供 选 取 日 期 和 时 间 的 新 输入 类 型 ， 目 前 只 有 Opera Du Vids X HE 
HTMLS 的 日 期 选择 器 。HTMLS 的 日 期 类 型 选择 器 见 表 3-1。 
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X 3-1 Date Pickers 类 型 


m 性 m TE 值 fü — X 


[2011-05-19 88] 
四 aH (Js: 
date 选取 日 、 月 、 年 
month 选取 月 、 年 








—zzmmnan*H 
2345868768 
9 10 11 12 13 14 15 
18 17 15 d oo 21 22 
23 24 28 28 27 28 29 
3 1 2 3 4 B 






mnk [Ese 


(9 





time 选取 时 间 《 人 小 时 和 分 钟 ) [23:58] [提交 
week 选取 周 和 年 s 2 3. i 4 : 
16 17 18 18 20 21 22 
23 24 25 28 2T 28 29 

22 3)31 1 2 3 4 


datetime 选取 时 间 、 日 、 月 、 年 (UTC 时 间 ) 


8 I0 II 12 13 14 15 


16 1T 18 19 20 21 22 
23 24 25 26 71A 75 


6 T 8 9 10 1l lz | 
13 14 15 16 If 18 il 
20 21 22 23 24 25 26| 


datetime-local 选取 时 间 、 日 、 月 、 年 (本 地 时 间 ) 








下 面 的 例子 允许 用 户 从 日 历 中 选取 日 、 月 、 年 。 


«form action-"demo date.aspx" method-"get"- 
«input type-"datet" name-"user date" /> 
«input type="submit" /> 

</form> 


6. search 类 型 
search 类 型 用 于 搜索 域 ， 比 如 站 点 搜索 或 Google R. Search 238789 EIN 6 LPS] SCAN 
域 。 例 如 : 





<form> 
<input type="search" name="typeSearch" /> 
<input type="submit" /> 

</form> 





search 类 型 表单 在 Chrome 中 的 效果 (由 于 Safari 与 Chrome 内 核 相 同 ， 所 以 search 呈现 
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的 效果 也 相同 ) 如 网 3-5 所 示 。 
7. color 类 型 
color 类 型 用 于 颜色 域 ， 目 前 只 有 Opera 支持 此 类 型 。 例 如 : 


«form» 
«input type-"color" name-"typecolor" /> 
«input type="submit" /> 


</form> 


color KIRE Opera 中 的 显示 效 末 如 图 3-6 PTR. 








图 3-5 search 类 型 图 3-6 color 类 型 


| 3.2 ”浏览 器 文 持 检测 


3.2.1 输入 类 型 检测 


要 检测 浏览 器 是 否 文 持 某 种 输入 类 型 ， 既 可 以 通过 创建 一 个 元 素 ， 给 这 个 元 素 的 
DOM 对 象 设 定 特 定 的 属性 值 ， 然 后 检查 浏览 嚣 是否 保留 了 该 属性 值 ， 也 可 以 使 用 
Modernizr JÆ MI]. 











代码 清单 3-1: 检测 浏览 器 是 否 文 持 表单 的 color 输入 类 型 
<!DOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function supports input color) { 
var i = document.createElement("input"); 
i.setAttribute("type", "color"); 
if(i.type !== "text") ( 
document.getElementById("checkResult").innerHTML-" OK! support!"; 
} else 1 document.getElementById("checkResult").innerH TML-"Sorry. No support." } 
j 
</script> 
</head> 
<body> 
<div 1d="checkResult" > «button onclick="supports input color)" >Check</button></div> 
</body> 
</html> 
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代码 分 析 : 
首先 ， 在 内 存 内 创建 一 个 input 元 素 〈 实 际 上 这 个 元 素 没有 任何 意义 )， 所 有 input 元 素 
的 类 型 都 默认 是 “text” 类 型 。 
var 1= document.createElement("input"); 
然后 ， 将 整个 input 7628 HJ 278 Vc EL ACCES UI BE dS AN 2763 
i.setAttribute(" type", "color"); 
最 后 ， 如 果 浏 览 器 文 持 要 检测 的 这 种 类 型 的 input 元 素 ， 那 么 设置 的 type 属性 值 会 被 浏 
览 器 识别 《该 区 型 值 会 被 保留 )。 反 之 ， 浏 览 右 会 忽略 设置 的 这 个 属性 值 ，type 属性 的 值 依 
然 会 是 默认 的 “text”。 











if(i.type !== "text"){ 
document.getElementById("checkResult").innerHTML-"OK! support!"; 
:elsef document.getElementById("checkResult").innerH TML-"Sorry. No support." } 


以 上 是 通过 创建 一 个 元 素 ， 然 后 给 这 个 元 素 的 DOM 对 象 设 定 特 定 的 属性 值 ， 最 后 检查 
浏览 右 是 否 保 留 了 该 属性 值 ， 来 判断 浏览 右 是 否 文 持 此 输入 类 型 。 由 于 HTMLS 表单 包括 多 
种 输入 类 型 ， 因 此 对 于 不 同 的 输入 类 型 就 意味 看 要 写 多 种 检测 方法 。 如 有 果 不 想 目 己 写 这 些 方 
法 ， 则 可 以 使 用 Modernizr 库 检 测 。 

















代码 清单 3-2: 构建 一 个 Modernizr 输入 类 型 散 列 ， 通 过 判读 这 个 散 列 包含 的 键 值 对 其 进行 检测 。 当 
值 是 true 时 ， 表 示 支 持 该 类 型 ， 反 之 ， 不 支持 该 类 型 
«script src-"modernizr.custom.]s" ></script> 
«script type-"text/javascript" 
if(Modernizr.inputtypes.color)( 
alert(" Your browser supports Form color!!"); 
Yelse{ alert("Sorry, Your browser does not support From color!"); ! 
</script> 


322 ”表单 特性 检测 


HTMLS 还 包含 很 多 表单 特性 ， 可 以 通过 创建 一 个 元 素 ， 然 后 检测 该 元 素 的 DOM 对 象 
是 和 否 拥 有 该 表单 的 特定 的 属性 ， 来 检测 浏览 器 是 和 否 支持 该 属性 。 

















代码 清单 3-3: 以 检测 表单 的 required 特性 为 例 ， 说 明 如 何 检测 浏览 器 是 否 文 持 所 定义 表单 特性 的 属性 
«script type-"text/javascript" 
function supports input required()| 
var i-document.createElement("input"); 
if('required' in 1)1 
alert("Y our browser supports Form required! !"); 
:else1 alert(" Sorry, Your browser does not support From required!"); } 
j 
</script> 
</head> 


«body onLoad-"supports input required) "></body> 
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WRAN H GiS EMRA, Wa MEH Modernizr 库 。 代 码 如 下 : 


<script type-"text/Javascript" 
if(Modernizr.input.required){ 
alert("Y our browser supports Form required attribute!!"); 
:else1 alert("Sorry, Your browser does not support From required attribute!"); } 
</script> 


| 3.3 output 元 素 与 datalist 元 素 


3.3.1 output JC% 
output 元 素 用 于 不 同类 型 的 输出 ， 如 计算 或 脚本 输出 等 。 








代码 清单 3-4: 通过 output 元 素 显 示 连 接 字符 串 的 实例 
<!DOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function resCalc(){ 
numA-document.getElementById("num a").value; 
numB-document.getElementById("num b").value; 
document.getElementById("result").value-String(numA )-*String(numB); 
j 
</script> 
</head> 
<body> 
<form onsubmit="return false"> 
<input 1d="num a"/>+ 
«input 1d="num b"/> <br/><br/> 
显示 : «output id="result" onforminput="resCalc()"></output> 
</form> 
</body> 
</html> 


ARIS 3-4 在 Opera 中 的 显示 效果 如 图 3-7 所 示 。 











图 3-7 output 元 素 的 使 用 效果 


3.3.2 datalist Jt 








datalist 元 素 规 定 输 入 域 的 选项 列表 。 列 表 是 通过 datalist 内 的 option 元 素 创 建 的 。 如 果 
需要 把 datalist 绑 定 到 输入 域 ， 可 用 输入 域 的 list 属性 引用 datalist 的 id. list 属性 规定 了 输入 
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IY HJ datalist。 


代码 清单 3-5: datalist 元 素 的 使 用 实例 
«input type-"url" list-"url list" name-"link" /> 
«datalist id-"url. list" 
«option label=" 搜 狐 " value-"http://www.sohu.com" /> 
«option label=" rR" value-"http://www.sina.com" /> 
np» 


«option label-" Zr 3X 
«/datalist^ 


ARIS 3-5 在 Opera 中 的 显示 效果 如 图 3-8 所 示 。 


value-"http://www.google.com" /> 











图 3-8  datalist 元 素 的 使 用 效果 


| 3.4 ”表单 特性 


熟悉 了 HTMLS 的 表单 类 型 之 后 ， 本 市 将 问 读 者 介绍 form 和 input 元 素 的 新 特性 。 无 论 
目前 的 浏览 器 是 否 文 持 这 些 新 特性 ， 用 户 都 可 放心 使 用 。 因 为 浏览 右 会 直接 忽略 不 文 持 的 特 
性 ， 而 不 会 报错 。 

1. autocomplete 属性 

autocomplete 属性 规定 form 或 input 域 具 有 目 动 完 成 功能 。 浏 览 堪 通 过 autocomplete All 
晓 是 合体 存 输入 什 以 备 将 来 使 用 。 例 如 : 


«input type="text" name-"fname" autocomplete-"on"/7 


当 autocomplete 取 值 为 on 时 ， 访 字段 无 需 受 到 保护 ， 值 可 以 被 保存 和 恢复 ; 当 
autocomplete 取 值 为 off 时 ， 该 学 段 需 要 受到 保护 ， 值 不 可 以 被 保存 。 

2. autofocus 属性 

autofocus 属性 规定 在 页 面 加 载 时 ， 域 目 动 地 获得 焦点 。autofocus 属性 适用 于 所 有 input 
标签 的 类 型 。 例 如 : 


«input type="text" name-"user name" autofocus 


需要 注意 的 是 ， 每 个 页 面 上 只 允许 出 现 一 个 autofocus 特性 。 如 末 设 置 了 多 个 
autofocus， 则 相当 于 未 指定 行为 。 

3. form 属性 

form 属性 规定 输入 域 所 属 的 一 个 或 多 个 表单 - 即 输 入 域 在 form 元 素 之 外 ， 但 仍然 是 表 
单 的 一 部 分 。form 属性 适用 于 所 有 input 标签 的 类 型 。form 属性 必须 引用 所 属 表 单 的 id. 
例如 : 

















—" 


autofocus" /> 








LM 


«form id-"user form" 


«input type-"text" name-"fname" /> 
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<input type="submit" /> 
</form> 


<input type="text" name-"Iname" form-"user form" /> 


4. multiple 属性 
multiple 属性 规定 输入 域 中 可 选择 多 个 值 。multiple 属性 适用 于 以 下 类 型 的 input 标签 的 
email 和 file 输入 类 型 。 例 如 : 


Add multiple files:<input type-"file" multiple="multiple" name-"attrMultiple" /> 


通过 muliple 属性 ， 用 户 可 以 同时 添加 多 个 文件 。 在 Opera 中 的 显示 效果 如 图 3-9 
所 示 。 

5. placeholder 属性 

placeholder 属性 又 称 后 空位 。 当 用 户 还 没有 输入 值 时 ， 输 入 控件 可 以 通过 placeholder 特 
性 辐 用 户 显 示 描 述 性 说 明 或 者 提示 信息 。placeholder 属性 适用 于 以 下 类 型 的 input. 标签 : 


text, search. url. telephone. email 和 password. f|: 


























UserName:«input type="text" name-"user text"  placeholder-"Please Input UserName " /> 


占 空 位 在 Opera 中 的 显示 效果 如 图 3-10 所 示 。 








Add multiple files] "E^ka.txt";" EA gl SE DEDE | UserName:|Please Input UserName 





K|3-9 multiple 属性 的 使 用 效果 图 3-10” 占 空位 效果 
6. required 属性 
required 属性 规定 必须 在 提交 之 前 填写 输入 域 。 当 某 输 入 控件 设置 了 required 特性 ， 那 
么 此 项 为 必 填 项 ， 否 则 无 法 提交 表单 。 例 如 : 


Name: «input type="text" name-"usr name" required-"required" /> 














required. 属性 适用 于 以 下 类 型 的 input 标签 : text. search. url. email. password. date 
pickers, number, checkbox, radio 和 file。 

7. novalidate 属性 

novalidate 属性 规定 在 提交 表单 时 不 应 该 验证 form 或 input 5X. novalidate 属性 适用 于 
form 及 以 下 类 型 的 input 标签 : text. search. url. email. password. date pickers, range 和 
color。 例 如 : 





«form novalidate="true"> 


= 


E-mail: <input type="email" name="user_email" /> 


—M 


«input type="submit" /> 
</form> 


| 3.5 RAMURA 


表单 验证 可 用 来 在 HTML 表 香 中 的 输入 数据 被 送 往 服务 占 前 对 它们 进行 验证 。HTML5 
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的 表单 验证 主要 包括 以 下 几 个 方面 的 验证 。 


m dH 


1. 输入 类 型 匹配 验证 
这 种 类 型 的 验证 ， 是 通过 表单 控件 的 type 属性 指定 的 ， 包 括 email. url; number. range 


。 如 果 浏 览 器 判定 表单 控件 的 输入 不 符合 相应 的 类 型 规划， 那么 浏览 右 开 会 提示 类 型 不 四 
。 例 如 : 


—M —M 


«input type-"email" name-"user email" />/ 


2. 输入 最 大 值 限 定 
通过 max 属性 设置 表单 规定 允许 的 最 大 值 。 该 属性 用 于 number 和 range 输入 类 型 表 








。 例 如 : 
«input type-"number" name-"user numbert" max="'4""/> 
3. 输入 最 小 值 限定 
通过 min 属性 设置 表单 规定 允许 的 最 小 值 。 该 属性 用 于 number 和 range 输入 类 型 表 
。 例 如 : 
«input type-"number" name-"user numbert" min-"4"/7 
4. 输入 步 长 值 限定 
通过 step 属性 设置 表单 规定 允许 的 步 长 值 。 该 属性 用 于 number 和 range 输入 类 型 表 
o 例如 : 


«input type="number" name-"user numbert" min="0" max="20" step="4"/> 


5. 输入 不 能 为 空 限定 
通过 required 属性 设置 表单 输入 不 能 为 空 的 限定 (required 默认 为 true )。 例 如 : 


=n 


<input type="text" name="user_text" required/> 
6. 输入 字符 数 的 限定 
通过 maxlength 属性 可 以 为 text 输入 类 型 设置 最 大 和 输入 字符 数 。 例 如 


—M 


«input type="text" name-"user text" maxlength-"4"/7 


7. 正则 表达 式 验证 
通过 pattern 属性 设置 验证 规则 ， 以 验证 输入 是 耕 有 效 。 这 种 方式 可 以 检查 用 户 输 入 是 








侍 匹 配 预 定义 的 模式 ， 如 电话 号码、 邮政 编码 、 电 子 邮 件 地 址 等 。 


代码 清单 3-6: 使 用 正则 表达 式 验证 输入 是 否 符合 电子 邮件 地 址 格式 


«form > 

<input type="text" name-"user regular" pattern- w-H([—-.' | Nw) *(aNw--([-7. Nw) * V wH. w" 
title=" 请 输入 电子 邮件 地 址 格式 ! ! "> 

«input type="submit" /> 


</form> 


代码 3-6 在 Opera 中 的 显示 效果 如 图 3-11 rz. 
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请 使 用 要 求 的 格式 
请 输入 电子 邮件 地 址 格式 ! | 





图 3-11 验证 电子 邮件 地 址 格式 


代码 分 析 : 
pattern. 属性 为 开发 人 员 提供 了 一 种 灵活 而 强大 的 通过 正则 表达 式 验证 表单 的 机 制 〈 关 于 
正则 表达 式 的 书写 ， 这 里 不 作 熬 述 ， 请 读者 参考 其 他 相关 内 容 )。title 属性 用 于 说 明 规则 的 








作用 。 


| 3.6 ”验证 反馈 





前 面 介绍 的 表单 验证 都 是 通过 浏 痪 右 将 默认 的 验证 信息 反馈 给 用 户 ， 如 果 开 发 人 员 想 探 
制 验证 浏览 器 反馈 给 用 户 的 信息 ， 则 可 以 通过 invalid 事件 实现 。 当 有 未 通 

















时 都 会 触发 invalid 事件 ， 然 后 将 错误 信息 反馈 给 用 户 。 
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<!DOCTYPE HTML> 
<html> 
<head> 
«script type="text/javascript"> 
function invalidHandler(evt) { 
/ 获取 表单 中 的 label 控件 
var label = evt.srcElement.parentElement.getElementsByTagName("label")[0]; 
label.style.display = 'inline-table'; /显示 标签 文本 
label.style.color='red'// 将 标签 文本 设置 为 红色 
evt.stopPropagation();// 停止 事件 冒 泡 
evt.preventDefault();//. 停 目 浏览 右上 默认 错误 验证 处 理 方 式 








j 
function loadDemo() (// 在 表单 上 注册 事件 处 理 函 数 ， 处 理 所 有 没有 通过 验证 的 控件 通知 
document.register.addEventListener("invalid", invalidHandler, false); 
j 
window.addEventListener("load", loadDemo, false); /注册 invalid 事件 的 监听 器 
</script> 
</head> 
<body> 
<form name="register"> 
<p> E-mail: 
«input id="emailaddress" name="emailaddress" type="email" placeholder=" 电 子 邮 件 地 址 "> 
<label for="emailaddress" title="Email" style="display:none"> 输 入 错误 ! </label> </p> 


«p AB: 


«input id-"number" type-"number" name-"dob" min-"5" max-"80" step-"5" placeholder-" 5-80 


内 5 Bede 


过 验证 的 表单 控件 


表单 元 条 与 相关 属性 


<label for="number" style="display:none"> 输 入 错误 ! </label> </p> 
«p» «input type="submit" name-"register" title=" 提 交 "> </p> 
</form> 
</body> 


</html> 


代 人 码 在 Opera 浏览 器 中 的 显示 效果 如 图 3-12 所 示 。 





Pasi: T 


数值 :| og 





图 3-12 表单 的 验证 反馈 


LEE, 
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第 4 章 B m Abi 


HTMLS 的 canvas 元 素 使 用 JavaScript 在 网 页 上 绘制 图 像 。 画 布 是 一 个 矩形 区 域 ， 可 以 
控制 其 中 每 个 像素 。canvas 拥有 多 种 绘制 路 径 、 窍 形 、 圆 形 、 字 符 以 及 添加 图 像 的 方法 。 





4.1 HTMLS5 画布 基础 


4.1.1 ”瑞明 canvas 
|] HTMLS 页 面 添加 canvas 元 素 十 分 简单 。 下 面 的 代码 在 HIMLS 的 页 面 中 插入 了 


canvaso 


«canvas id-^"mycanvas" width-" 100" height-" 100" »—/canvas^ 














为 了 能 在 JavaScript 中 引用 元 素 ， 了 最 好 给 元 素 设 置 ID， 同 时 需要 给 canvas 设 定 高 度 和 帘 
上 度 。 以 上 代码 会 在 页 面 上 显示 一 个 100X100 像素 的 “隐藏 ”区 域 ， 可 以 通过 CSS 边框 属性 
来 设置 画布 区 域 的 显示 状态 。 








代码 清单 4-1: 通过 CSS 设置 canvas 边框 
<!DOCTYPE HTML» 
<html> 
<head> 
<style type="text/css"> 
#mycanvas{ border:1px solid red; } 
</style> 
</head> 
<body> 
«canvas id="mycanvas" width="100" height=" 100" »—/canvas^ 
</body> 
</html> 


4.1.2 HERY 

canvas 创建 的 固定 尺寸 的 绘图 画面 开放 了 一 个 或 多 个 泻 染 上 上 下文 〈rendering context), 
可 以 通过 它们 来 控制 要 显示 的 内 容 。 

canvas 初始 化 后 是 空 晶 的， 要 在 上 面 用 脚本 画图 首先 需要 洽 染 上 下 文 ， 可 以 通过 canvas 
元 又 对 象 的 getContext() 方 法 来 获取 ， 同 时 得 到 的 还 有 一 些 画 图 用 的 函数 。getContext() 接 受 
一 个 用 于 摘 述 其 类 型 的 值 作为 参数 。 

















var canvas = document.getElementById("myCanvas"); 
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var ctx = canvas.getContext(" 2d"); 


JavaScript 使 用 ID 来 寻找 canvas 76:5, MIT getElementById 方法 取得 canvas 对 象 的 
DOM 市 点 。 然 后 通过 getContext (方法 取得 其 画图 操作 上 上下文。getContext("2d") 对 象 是 内 建 
的 HTML5 对 象 ， 具 有 多 种 绘制 路 人 笃 、 和 矩形 、 圆 形 、 和 字符 以 及 添加 图 像 的 方法 。 


4.1.3 浏览 埋 文 持 检 测 


在 创建 canvas 元 系 之 前 ， 首 先 要 确保 浏览 侣 文 持 它 ， 如 果 不 文 持 可 以 为 其 添加 和 奉 换 性 的 
文字 进行 说 明 。 检 测 浏览 器 是 否 支 持 Canvas API， 可 以 创建 一 个 虚拟 元 素 ， 然 后 检测 访 元 素 
的 DOM 对 象 是 售 拥 有 特定 的 属性 。 




















代码 清单 4-2: 检测 浏览 器 是 否 支持 canvas 
«script type="text/Javascript"> 
function support canvas() { 
var ctx-document.createElement("canvas"); 
if(ctx.getContext) 1 
document.getElementById("checkResult").innerHTML-"OK! Full support!"; 
} else{ document.getElementById("checkResult").innerH TML-"Sorry. No support." } 
j 
</script> 
</head> 
<body> 
<div id="checkResult" > 
«button onclick="support canvas()">Check</button> 
</div> 
</body> 


以 上 代码 首先 创建 一 个 虚拟 的 canvas 元 素 ， 然 后 判断 该 元 素 是 耕 拥 有 getContextO 方 
法 。 访 方法 只 有 浏览 器 文 持 时 才 存 在 。 
如 果 不 想 目 己 编 写 上 面 的 方法 ， 也 可 以 使 用 Modernizr 特性 检测 库 进 行 检测 。 








if( Modernizr.canvas)( 
alert("Y our browser supports canvas!!"); 
Yelse{ alert("Sorry, Your browser does not support canvas!"); } 


| 4.2 ”绘制 图 形 


canvas 元 素 本 喘 是 没有 绘图 能 力 的 ， 所 有 的 绘制 工作 必须 在 JavaScript 内 部 完成 。 首 先 
通过 getElementById 函数 找到 canvas 元 素 ， 然 后 初始 化 上 下 文 ， 之 后 便 可 以 使 用 上 下 文 API 
绘制 各 种 图 形 。 

4.2.1 绘制 阜 形 


可 以 使 用 strokeRect0 和 fillRect0 来 绘制 矩形 的 边框 和 填充 算 形 。 此 外 ， 可 以 使 用 
clearRect() 来 清除 矩形 所 定义 的 区 域 。 
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代码 清单 4-3: 在 canvas 中 绘制 和 清除 一 个 矩形 
«IDOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function fillRectangle() { 
var c-document.getElementById("myCanvas");//fit H] ID 寻找 canvas 元 素 
var cxt-c.getContext("2d");//B]]&& Context X] Z& 
cxt.strokeStyle-"Red";//3H ZE EREHE, 
cxt.fillStyle="Yellow"; /填充 颜色 
cxt.fillIRect(0,0,150,80);/ 规定 了 形状 、 位 置 和 尺寸 域 
cxt.strokeRect(0.0,150,80);/ 绘 制 矩形 边框 
function clearRectangle() { 
var c-document.getElementById("myCanvas"); 
var cxt-c.getContext("2d"); 
cxt.clearRect(0,0,75,40);// 清 除 定 义 大 小 的 定形 
j 
</script> 
</head> 
<body > 
«canvas id="myCanvas" width=" 150" height="80"></canvas><br/> 
«button onclick-"fillRectangle();return true;"> 5j zs «/button- 
«button onclick-"clearRectangle();return true;"> 清 除 </button> 
</body> 
</html> 


代码 在 Opera 浏览 占 中 显示 的 绘制 和 清除 填充 操作 前 后 效 末 如 图 4-1 Bran 








图 4-1 canvas 中 的 绘制 与 清除 效果 
代码 分 析 : 
(1) strokeRect (x, y, width, height) 方法 按照 指定 的 位 置 和 大 小 绘制 一 个 矩形 的 边框 (但 
并 不 填充 矩形 的 内 部 )。 线 条 颜色 和 线条 宽度 由 strokeStyle 和 lineWidth 属性 指定 。 
(2) fillRect(x, y, weight, height) 方法 使 用 fillStyle 属性 所 指定 的 颜色 、 渐 变 和 模式 来 填 
到 指定 的 滤 形 。 
(3) clearRect (x, y, width, height) 方法 探 除 了 指定 的 矩形 ， 并 且 用 一 个 透明 的 颜色 填充 它 。 


4.2.2 WA TA 


与 绘制 定形 不 同 ， 绘 制 路 径 需 要 以 下 步骤 。 
(1) 使 用 beginPath 方法 创建 一 个 路 径 。 在 内 存 里 ， 路 径 是 以 一 组 子路 径 〈 直 线 、 弧 线 
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等 ) 的 形式 储存 的 ， 它 们 共同 构成 一 个 图 形 。 每 次 调用 beginPath 方法 ， 子 路 径 组 都 会 被 重 
置 ， 然 后 可 以 绘制 新 的 图 形 。 

(2) 使 用 moveTo、lineTo 方法 绘制 路 径 。 

(3) 调用 closePath 方法 。 访 方法 会 尝试 用 直线 连接 当前 问 点 与 起 始 端 点 来 关闭 路径， 
但 如 果 图 形 已 经 关闭 或 者 只 有 一 个 点 ， 它 束 会 什么 都 不 做 。 这 一 步 不 是 必需 的 。 

(4) 调用 stroke 或 fill 方法 。 这 时 ， 图 形 才 人 锌 绘制 到 canvas 上 去 。stroke 用 于 绘制 图 形 
的 边框 ，fill 用 于 填充 出 一 个 实心 图 形 。 


代码 清单 4-4: 绘制 路 径 的 实例 
<!DOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function drawPath( ){ 
var canvas = document.getElementById('myCanvas"); 

















var ctx = canvas.getContext('2d"); 
IH fS S ORÉ 
ctx.beginPath(); 
ctx.moveTo(25,25); 
ctx.lineTo(105,25); 
ctx.lineTo(25,105); 
ctx.fill(); 
/绘制 边框 
ctx.beginPath(); 
ctx.moveTo(125,125); 
ctx.lineTo(125,45); 
ctx.lineTo(45,125); 
ctx.closePath(); 
ctx.stroke(); 
j 
</script> 
</head> 
«body onload="drawPath();"> 
<canvas id="myCanvas" width="150" height="150" style="border:solid 1px #000000;"> 
Sorry! your browser does not support Canvas. 





<canvas> 

</html> 

代 人 码 在 Opera Ñ) Vi zs P R e ZR CHR UH S] 4-2 所 示 。 
代码 分 析 : 





(1) beginPath O 方法 可 在 一 个 画布 中 开始 子路 径 的 一 个 新 的 集 
。beginPath 0 方法 丢弃 任何 当前 定义 的 路 径 ， 并 且 开 始 一 条 新 的 路 
， 蕊 把 当前 的 点 设置 为 (0,0) 。 

(2) moveTo (x, y) 方法 将 当前 位 置 设 置 为 (x,y) 并 用 它 作 为 第 一 点 4-2 绘制 路 径 
来 创建 一 条 新 的 子路 任 。 如 果 之 前 有 一 条 子路 人 径 并 且 它 包含 刚才 的 那 





HN Dp 
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一 点 ， 那 么 会 从 此 路 径 中 删除 该 子路 径 。 

(3) lineTo (xy) 方 法 为 当前 子路 径 添加 一 条 直线 。 这 条 百 线 从 当前 点 开始 ， 到 (xy) 结 
束 。 当 方法 返回 时 ， 当 前 点 是 (xy) 。 

(40 fl10 方 法 使 用 fillStyle 属性 所 指定 的 颜色 、 渐 变 和 模式 来 填充 当前 路 径 。 这 一 路 径 
的 每 一 条 子路 径 都 单独 填充 ， 任 何 未 闭合 的 子路 径 都 会 被 填充 。 

(5) closePath 0 方法 关闭 一 条 打开 的 子路 径 。 如 果 男 布 的 子路 径 是 打开 的 ，closePathO) 
方法 会 通过 添加 一 条 线条 连接 当前 点 和 子路 径 起 始点 来 关闭 它 。 如 果子 路 径 已 经 财 合 了 ， 则 
这 个 方法 不 做 任何 事情 。 一 旦 子路 径 财 合 ， 残 不 能 再 为 其 添加 更 多 的 特 线 或 曲线 了 。 要 想 继 
续 问 该 路 径 添 加 ， 需 要 通过 调用 moveTo O 开始 一 条 新 的 子路 径 。 

(6) stroke 方法 绘制 当前 路 径 的 边框 ， 虽 然 产 生 了 路 径 定 义 的 几何 线条 ， 但 线条 的 可 
视 化 取决 于 strokeStyle. lineWidth. lineJoin, lineCap 和 miterLimit 等 属性 。 


4.2.3 绘制 各 种 线条 


1， 基 本 线条 
HTMLS 通过 指定 从 何 处 开始 、 在 何 处 结束 来 绘制 一 条 线 。 线 条 可 以 视 为 路 径 的 一 部 
分 。 可 以 通过 以 下 脚本 绘制 基本 线条 。 


function drawline()( 

















var c = document.getElementById("myCanvas"); 
var cxt = c.getContext("2d"); 
cxt.moveTo(5,5); 
cxt.lineTo(150,80); 
cxt.stroke(); 
j 


此 外 ， 还 可 使 用 以 下 属性 对 线条 进行 修饰 。 
(12 strokeStyle 属性 用 来 填充 边框 闫 色 。 
(2) lineWidth 属性 用 来 指定 线条 的 宽度 。 
(3) lineCap 属性 用 来 指定 线段 如 何 结束 。 只 有 绘制 较 宽 的 线段 时 它 才 有 效 。 这 个 属性 
的 合法 值 包 括 : 
看 butt: 这 个 默认 值 指定 了 线段 应 该 没有 线 帽 。 线 条 的 末 点 是 平 直 的 而 且 和 线条 的 方 问 
下 交 ， 这 条 线段 在 其 问 点 之 外 没有 扩展 。 
E Round: 这 个 值 指 定 了 线段 应 该 之 有 一 个 半圆 形 的 线 帽 ， 半 圆 的 直径 等 于 线段 的 宽 
度 ， 并 且 线 段 在 站 点 之 外 扩展 了 线段 宽度 的 一 半 。 
WB Square: 这 个 值 表 示 线 段 应 该 带 有 一 个 窍 形 线 帽 。 这 个 值 和 butt 一 样 ， 但 是 线段 扩展 
了 和 目 己 的 宽度 的 一 半 。 
2. 弧 形 线条 
用 arc 0 方法 来 绘制 弧 线 或 加 。 该 方法 使 用 一 个 中 心 点 和 半径 ， 为 一 个 画布 的 当前 子路 
径 添加 一 条 弧 。 
语法 : 


arc(x, y, radius, startAngle, endAngle, counterclockwise) 
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(1) x,y: 摘 述 弧 所 在 圆 的 圆心 坐标 。 

(2) radius: 摘 述 踊 所 在 圆 的 半径 。 

(3) startAngle, endAngle: 沿 者 圆 指定 弧 的 开始 点 和 结束 点 的 一 个 角度 。 这 个 角 展 用 弧 
度 来 衡量 。 治 看 X 轴 正 半 轴 方 问 的 角度 为 0” ， 角 上 度 沿 逆 时 针 方 问 增 大 。 

(4) counterclockwise: 弧 沿 看 圆周 的 逆 时 针 方 辐 (true〉 还 是 顺 时 和 针 方 回 〈false) W 

可 以 通过 如 下 代码 绘制 一 个 圆 形 区 域 。 























var c= document.getElementById("myCanvas"); 
var cxt = c.getContext("2d"); 


cxt.beginPath(); 

cxt.arc(200, 150, 50, 0, Math.PI * 2, true); 

cxt.closePath(); 

cxt.stroke(); Kl4-3 圆 形 区 域 





代码 在 Opera 浏览 器 中 的 显示 效果 如 图 4-3 所 示 。 

此 外 ， 还 有 一 个 创建 弧 形 的 方法 一 一 arcTo (0 方法。 该 方法 使 用 切 点 和 一 个 半径 为 当前 
子路 径 添加 一 条 圆 踊 ， 但 是 ， 它 所 描述 的 这 条 圆 踊 和 are (方法 所 摘 述 的 圆 弧 大 不 相同 。 添 
加 给 路 径 的 圆 踊 是 具有 指定 半径 (radius) 的 圆 的 一 部 分 ， 该 圆 踊 有 一 个 点 与 当前 位 置 到 PI 
的 线段 相 切 ， 还 有 一 个 点 与 从 P1 到 P2 的 线段 相 切 。 这 两 个 切 点 束 是 圆 踊 的 起 点 和 终点 ， 
激 绘 制 的 方 回 束 是 连接 这 两 个 点 的 最 短 圆 激 的 方 同 。 





























语法 : 

arc(xl, yl, x2, y2, radius) 

B xl,yl: 点 PI 的 坐标 。 
B x2,y2: 点 P2 的 坐标 。 


B radius: jE X RIDIR RRE. 
a UH Fi zz m -TEENE EA HAA). 


var canvas = document.getElementById('myCanvas'); 





var ctx = canvas.getContext('2d'); 


ctx.beginPath(); 

ctx.moveTo(10,10); /在 左上 方 开始 

ctx.lineTo(90,10); // 到 达 圆 角 开 始点 的 水 平 线 | 
ctx.arcTo(100,10,100,20,10); / 圆 角 

ctx.lineTo(100,100); 

ctx.stroke(); 


图 4-4 HEHH 





代码 在 Opera 浏览 器 中 的 显示 效果 如 图 4-4 所 示 。 

3. 贝 塞 尔 曲线 与 二 次 贝 塞 尔 曲 线 

可 以 使 用 bezierCurveTo 0 方法 构建 贝 赛 尔 曲线 。bezierCurveTo 0 方法 用 于 在 一 个 夯 布 中 
开始 子路 径 的 一 个 新 的 集合 。 它 可 以 是 二 次 方 和 三 次 方 的 形式 ， 一 般 用 于 绘制 复杂 而 有 规律 
的 形状 。 

JÆ bz TRA: 


bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y) 
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(C1) cpX1, cpY1: 与 曲线 开始 点 〈 当 前 位 置 ) 关联 的 控制 点 的 坐标 。 

(2) cpX2, cpY2: 与 曲线 结束 点 关联 的 控制 点 的 坐标 。 

(3) x,y: 曲线 结束 点 的 坐标 。 

bezierCurveTo 0 方法 为 一 个 画布 的 当前 子路 径 添加 一 条 三 次 贝 吉 尔 曲线 。 这 条 曲线 的 开 


























始点 是 男 布 的 当前 点 ， 结 束 点 是 (xy) 。 贝 宅 尔 曲线 的 两 个 控制 点 (cpX1, cpY1) 和 (cpX2, 
cpY2) 定义 了 曲线 的 形状 。 当 这 个 方法 返回 的 时 候 ， 当 前 的 位 置 为 (x, y) 。 


始 ， 


IX MER HB TRA: 
quadraticCurveTo(cpX, cpY, x, y) 


(C1) cpX, cpY: 控制 点 的 坐标 。 

(2) x,y: 曲线 终点 的 坐标 。 

quadraticCurveTo W) 方 读 为 当前 的 子路 径 添 加 一 条 二 次 贝 塞 尔 曲 线 。 这 条 曲线 从 当前 点 开 
到 (x,y) 结束 。 控 制 点 (cpX,cp 站 说 明了 这 两 个 点 之 间 的 曲线 的 形状 。 

贝 罕 尔 曲 线 与 二 次 贝 窒 尔 都 有 一 个 起 点 和 一 个 终点 。 二 次 贝 客 尔 有 曲线 只 有 一 个 控制 点 ， 





三 次 贝 终 尔 曲线 有 两 个 控制 点 。 
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<!DOCTYPE HTML> 

<html> 

<head> 

«script type="text/Javascript"> 

function drawShape(){ 
var canvas = document.getElementById('myCanvas"); 
var ctx = canvas.getContext('2d'); 
/绘制 贝 塞 尔 曲 线 
ctx.beginPath(); 
ctx.bezierCurveTo(150, 70, 200, 30, 250, 70); 
ctx.bezierCurveTo(250, 70, 300, 110, 350, 70); 
ctx.stroke(); 
IE S] — TX DAE AR HH ZR 
ctx.beginPath(); 
ctx.moveTo(100, 150); 
ctx.quadraticCurveTo(200, 10, 300, 150); 
ctx.stroke(); 

j 

</script> 

</head> 

«body onLoad="drawShape ()"> 

<canvas id="myCanvas" width="800" height="300" > 

Sorry! your browser does not support Canvas. 

</canvas> 

</body> 

</html> 
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代 人 码 在 Opera 浏览 器 中 的 显示 效果 如 图 475 所 示 。 


QE C 


A 


图 4-5 NÆR BRM ZA NER RR 


| 4.3 ARZ 


在 Canvas API 中 ， 图 像 通 过 表示 HTML img 元 素 的 Image 对 象 来 指定 ， 或 者 通过 
使 用 Image 0) 构造 冰 数 所 创建 的 屏 硕 外 图 像 来 指定 。 一 个 Canvas 对 象 也 可 以 用 做 网 像 

可 以 使 用 drawImage (方法 在 一 个 画布 上 绘制 图 像 。 而 更 为 常见 的 形式 是 ， 人 允许 源 网 像 
的 任意 窍 形 区 域 缩放 或 绘制 到 画布 上 。 

语法 : 














drawImage(1mage, x, y) 
drawImage(image, x, y, width, height) 
drawImage(1mage, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) 


(I) image: 要 绘制 的 图 像 。 这 必须 是 表示 img ERA DAS BRI Image 对 象 ， 或 
者 是 Canvas 元 素 。 

(2) x,y: 要 绘制 的 图 像 左 上 角 的 位 置 。 

(3) width, height: 网 像 押 应 该 绘制 的 尺寸 。 指 定 这 些 参数 使 得 网 像 可 以 缩放 。 

(4) sourceX, sourceY: 图 像 将 要 被 绘制 的 区 域 的 左上 角 。 这 些 整 数 参 数 用 像素 表示 。 

(5) sourceWidth, sourceHeight: 图 像 所 要 绘制 的 区 域 的 大 小 ， 用 像素 表示 。 

(6) destX, destY: 所 要 绘制 的 图 像 区 域 的 左上 角 的 画布 坐标 。 

(7) destWidth, destHeight: 图 像 区 域 所 要 绘制 的 画布 大 小 。 


4.3.1 将 图 像 复 制 到 画布 


可 以 通过 drawImage (image, x, y) 方法 把 整个 图 像 复 制 到 男 布 ， 将 其 放置 到 指定 点 的 左上 
角 ， 并 旦 将 每 个 像素 映射 成 画布 坐标 系 的 一 个 早 元 。 
































代码 清单 4-6: 将 图 像 复 制 到 画布 的 实例 
<!DOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function drawlmage(){ 
var canvas = document.getElementById('myCanvas"); 
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var ctx = canvas.getContext('2d'); 
ctx.beginPath(); 
var image = document.getElementById('imgSampleImage"); 
cxt.drawImage(1mage, 0, 0); 
j 
</script> 
</head> 
«body onload="drawImage();"> 


一 111 


«img src-"1mages/sampleImage.png" alt-"Canvas Image" id-"imgsampleImage" /> 


—M 


«canvas id-"myCanvas"»«/canvas^ 
</body> 
</html> 


43.2. 图 像 缩放 


可 以 通过 drawImage (image, x, y, width, height) 方法 把 整个 图 像 复制 到 了 画布， 但 是 允许 用 
国 布 单位 来 指定 图 像 的 宽度 和 高 度 。 

















代码 清单 4-7: 实现 图 像 的 缩放 
<!DOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function drawlImage() { 
var c = document.getElementById("myCanvas"); 
var cxt = c.getContext("2d"); 
var image = document.getElementById('imgSampleImage"); 
cxt.drawImage(1mage, 100, 60, 70, 60); 
j 
</script> 
</head> 
«body onload="drawImage();"> 
«img src="images/sampleImage.png" alt="Canvas Image" id-"imgSampleImage" /> 
«canvas id="myCanvas" width="180" height="130" style="border: 1px solid #000;"> 
Sorry! your browser does not support Canvas. 
</canvas> 
</body> 
</html> 


ARIETE Opera 浏览 器 中 的 显示 效果 如 图 4-6 所 示 。 








图 4-6 图 像 的 缩放 效果 
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4.3.8 [gf 519) 


可 以 通过 drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, 
destWidth, destHeightb) 方 法 指定 图 像 的 任何 定形 区 域 并 复制 〈 剪 切 ) 它 ， 对 画布 中 的 任何 位 置 
都 可 进行 任意 盐 切 。 





代码 清单 4-8: 图 像 剪 切 的 实例 
«IDOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function drawImage() { 
var c = document.getElementById("myCanvas"); 
var cxt = c.getContext("2d"); 
var image = document.getElementById('imgSampleImage"); 
cxt.drawImage(1mage,20, 20, 100, 80,40, 20, 100, 80); 
j 
</script> 
</head> 
«body onLoad="drawImage()"> 
«img src="images/sampleImage.png" alt="Canvas Image" id-"imgSampleImage" /> 
«canvas id="myCanvas" width="180" height="130" style="border: 1px solid #000;"> 
Sorry! your browser does not support Canvas. 
</canvas> 
</body> 
</html> 


ARIES Opera Ñ) 9i zs P A ERAR E] 4-7 所 示 。 
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图 4-7 BRIDAK 


| 4.4 Canvas 文本 


除了 可 以 在 Canvas 上 绘制 线条 外 ， 还 可 以 绘制 文本 。 操 作 Canvas 文本 的 方式 与 路 径 的 
方式 基本 相同 ， 可 以 摘 绘 文本 轮廓 、 填 充 文 本 内 部 以 及 应 用 变换 等 。 

文本 绘制 功能 可 由 两 个 函数 完成 

(12 fillText (text;x,y,maxwidth) 

(2) strokeText (text,x,y,maxwidth) 

text 参数 为 Canvas 显示 的 文本 ; x. y 参数 为 文本 在 Canvas 上 的 坐标 ;maxwidth 是 可 选 
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参数 ， 用 于 限制 字体 大 小 ， 访 参数 将 文本 学 体 强 制 收缩 到 指定 尺寸 。 

Canvas API 还 提供 了 以 下 设置 文本 的 上 下 文 属性 。 

(1) font 设置 文本 的 字体 、 大 小 ， 如 Italic Arial,Sans-Serif。 

(2) textAlign 设置 文本 的 对 章 方式 。 值 为 start、end、left、right、center。 默 认 值 为 
start. 

(3) textBaseline 设置 文本 的 基线 。 值 为 top. hanging. middle. alphabetic, ideographic 
以 及 bottom. SA HJ alphabetic. 


代码 清单 4-9: 在 Canvas 上 绘制 文本 
<!DOCTYPE HTML» 
<html> 
<head> 
«script type="text/Javascript"> 
function drawText() { 
var canvas = document.getElementById('myCanvas"); 
var ctx = canvas.getContext('2d"); 
ctx.font = 'Italic 40px Sans-Serif; 
ctx.strokeText('Hello world!', 40, 50); 
ctx.fillStyle = '#00F'; 
ctx.font = 'Bold 40px Sans-Serif; 
ctx.textBaseline = 'Top'; 
ctx.fillText ('Hello world!', 40, 100); 
j 
</script> 
</head> 
«body onload-"drawText();" 
«canvas id-"myCanvas"»«/canvas^ 
</body> 
</html> 





ARISE Opera Ñ) Vi zs P EP] e ZR CAR UH S] 4-8 所 示 。 


Hello world! 





| 45 ”样式 与 色彩 Hello world! 


图 4-8 设置 文本 效果 
4.51 色彩 属性 
如 果 想 要 给 图 形 上 色 ， 可 以 通过 fillStyle 和 strokeStyle 属性 实现 。fillstyle 用 于 设置 填充 
颜色 ， 而 strokeStyle 用 于 设置 图 形 轮廓 的 颜色 。 这 里 的 颜色 值 可 以 是 表示 CSS 颜色 值 的 字符 
串 ， 也 可 以 是 RGB 颜色 值 、RGBA 颜色 值 、HSL 颜色 值 。 例 如 : 








ctx.fillStyle = 'red'; 

ctx.fillStyle = '#FFA 500 '; 
ctx.fillStyle = 'rgb(255,165,0) '; 
ctx.fillStyle = 'rgba(255,165,0,1) '; 
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ctx.fillStyle = hsl(120, 10096, 50%) '; 


452 ”设置 透明 度 


PRT I ARREA, 还 可 以 使 用 canvas 来 设置 图 形 的 透明 度 。globalAlpha 属性 能 够 
很 好 地 完成 这 一 功能 。 这 个 属性 影响 到 canvas 中 所 有 图 形 的 透明 度 ， 有 效 值 范围 从 0.0 CE 
全 透明 ) 到 1.0〈 完 全 不 透明 )， 默 认 值 是 1.0。 











代码 清单 4-10: 设置 图 形 的 透明 度 
«IDOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function drawShape(){ 
var canvas = document.getElementById('mycanvas); 
var ctx = canvas.getContext('2d'); 
ctx.fillRect(0,0,150,150); 
ctx.fillStyle = 'white'; 
ctx.globalAlpha = 0.2; 
for (var 1=0;1<7;1++){ 
ctx.beginPath(); 
ctx.arc(75,75,104-10*1,0, Math.PT*2,true); 
ctx.fill(); } 
j 
</script> 
</head> 
«body onload="drawShape();"><canvas id="mycanvas"></canvas></body> 
</html> 


代码 在 Opera 浏览 器 中 的 显示 效果 如 图 4-9 所 示 。 
4.5.3 ”渐变 
n Koa 图 软 什 一 i uf EAR £ E SX ar ES I] PIE AE AREA T8 ndi 
i 1 i 创建 canvasGradient 对 象 。 
(2) 为 渐变 设置 颜色 ， 指 明 颜 色 过 渡 方 式 。 


(3) 设置 填充 方式 或 描 边 方式 。 
创建 渐变 对 象 的 方法 : 








(=Œ 








图 4-9 EHER 





createLinearGradient(x1,y 1,x2,y2) 
createRadialGradient(x l,y1,7r1,x2,y2,12) 


€ createLinearGradient 方法 接受 4 个 参数 ， 表 示 渐 变 的 起 点 (xl,yl) 与 终点 (x2,y2) 。 
B createRadialGradient 方法 接受 6 个 参数 ， 前 三 个 参数 定义 一 个 以 (lyl) 为 原点 ， 半 
径 为 rl 的 圆 ， 后 三 个 参数 则 定义 夯 一 个 以 (x2,y2) 为 人 原点， 半径 为 22 的 圆 。 
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代码 清单 4-11: 构建 渐变 图 形 
«IDOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function drawGradient() ( 
var c-document.getElementById("myCanvas"); 
var cxt-c.getContext("2d"); 
var grd-cxt.createLinearGradient(0,0,175,50); 
grd.addColorStop(0," Red"); 
grd.addColorStop( 1," Yellow"); 
cxt.fillStyle-grd; 
cxt.fillRect(0,0,175,50); 
j 
</script> 
</head> 
«body onLoad="drawGradient()"> 
<canvas id="myCanvas"> Your browser does not support the canvas element. </canvas> 
</body> 
</html> 


ARISTE Opera 浏览 器 中 的 显示 效果 如 图 4-10 所 示 。 
创建 完 canvasGradient 对 象 后 ， 再 通过 addColorStop (position, 


color) 方法 进行 上 色 。addColorStop 方法 接受 两 个 参数 ，position Z 图 4-10 渐变 效果 
数 必须 是 一 个 0 一 1 之 间 的 数值 ， 表 示 渐 变 中 颜色 所 在 的 相对 位 置 ， 如 0.5 表示 颜色 会 出 现在 
正中 间 ; color 参数 必须 是 一 个 有 效 的 CSS 颜色 值 ， 如 #FF、rgba (0,0,0,1) 等 。 











4.5.4 D] 
在 Canvas API 中 有 几 种 全 局 的 上 下 文 属 性 用 于 控制 阴影 ， 见 表 4-1。 


表 4-1 控制 阴影 属性 


Sebot 设置 阴影 颜色 ， 可 以 为 透明 度 
shadowOffsetX 值 为 正 数 ， 向 右 移动 阴影 ， 值 为 负数 ， 向 左 移动 阴影 
shadowOffsetY 值 为 正 数 ， 向 下 移动 阴影 ， 值 为 负数 ， 向 上 移动 阴影 


shadowBlur 高 斯 模糊 值 越 大 ， 阴 影 边 缘 越 模糊 











代码 清单 4-12: 为 文本 应 用 阴影 
«IDOCTYPE HTML> 
<html> 
<head> 
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«script type-"text/javascript"^ 
function drawShadow() 1 
var ctx = document.getElementById('myCanvas'").getContext('2d"); 
ctx.shadowOffsetX = 6; 
ctx.shadowOffsetY = 6; 
ctx.shadowBlur - 2; 
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; 
ctx.font = "44px Times New Roman"; 
ctx.fillStyle = "Blue"; 
ctx.fillText("Hello World", 5, 30); 
j 
</script> 
</head> 
<body onLoad="drawShadow()"> 
<canvas id="myCanvas"></canvas> 
</body> 
</html> 





代 人 码 在 Opera Ñ) Vi zs P ERAR E] 4-11 所 示 。 


Hello Wordi 


图 4-11 阴影 效果 


| 4.6 变形 


4.6.1 保持 与 恢复 


在 介绍 变形 之 前 ， 先 介绍 一 下 两 个 绘制 复 杀 图 形 必 不 可 少 的 方法 : save 0M restore()。 

save 和 restore 方法 用 来 保存 和 恢复 canvas 的 状态 ， 都 没有 参数 。canvas 的 状态 就 是 当 
前 画面 应 用 的 所 有 样式 和 变形 的 一 个 快照 。 

canvas 的 状态 是 以 栈 的 方式 保存 的 ， 每 一 次 调用 save 方法 ， 当 前 的 状态 束 会 被 推 入 栈 中 
体 存 起 来 。 每 一 次 调用 restore 方法 ， 上 一 个 保存 的 状态 就 从 栈 中 弹出 ， 所 有 设 定 都 被 恢复 。 

这 种 状态 包括 : 当前 的 裁 切 路 径 、 移 动 、 旋 转 、 纵 放 、strokeStyle fillStyle 、 
globalAlpha. lineWidth. lineCap. lineJoin, miterLimit, shadowOffsetX 、ShadowOffsetY 、 
shadowBlur. shadowColor. globalCompositeOperation 的 值 。 





























代码 清单 4-13: 保存 与 恢复 的 实现 
«IDOCTYPE HTML> 
<html> 
<head> 


«script type="text/Javascript"> 
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4.6.2 移动 


不 同 的 位 置 。translate 方法 接受 两 个 参数 。x 是 左右 偏 移 


function drawTran(){ 
var ctx = document.getElementById('myCanvas').getContext('2d"); 
ctx.fillStyle="Green";// 填 充 色 为 绿色 
ctx.fillRect(0,0,150,150); /绘制 矩形 作为 默认 设置 
ctx.save();// 保 存 绿 色 的 矩形 
ctx.fillStyle = "Yellow"; // 改变 填充 颜色 
ctx.globalAlpha = 0.5; /设置 透明 度 
ctx.fillRect(30,30,90,90); /绘制 新 的 矩形 区 域 
ctx.restore(); /从 堆 中 取出 画布 状态 并 恢复 议定 
ctx.fillRect(45,45,60,60); / 绘制 矩形 











j 

</script> 

</head> 

<body onLoad="drawTran()"> 

«canvas id="myCanvas"> Your browser does not support the canvas element. </canvas> 
</body> 

</html> 





代 人 码 在 Opera 浏览 器 中 的 显示 效果 如 图 4-12 所 示 。 





translate (x,y) 方法 用 来 移动 canvas 和 它 的 原点 到 一 个 








w, yE Fm E. 图 4-12 ”保存 与 恢复 实例 
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代码 清单 4-14: 使 用 translate 实现 移动 


«IDOCTYPE HTML> 
<html> 
<head> 
<script type="text/Javascript"> 
function drawTran(){ 
var ctx = document.getElementById('myCanvas').getContext('2d'); 
ctx.fillStyle = "Blue"; 
ctx.fillRect(0,0,80,80); 
ctx.translate(80,80); 
ctx.fillRect(0,0,80,80); 
j 
</script> 
</head> 
«body onLoad="drawTran()"> 
<canvas id="myCanvas" width="160" height="160" style="border:solid 1px #000000;"> 
Your browser does not support the canvas element. 
</canvas> 
</html> 
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代码 在 Opera 浏览 器 中 的 显示 效果 如 图 4-13 PZR o 


4.6.3 ”缩放 


可 以 用 scale x,y) 来 增 减 图 形 在 canvas. 中 的 像素 数目 ， 对 形状 、 
位 图 进行 缩小 或 者 放大 。scale 方法 接受 两 个 参数 。x 和 y 分 别 是 横 轴 
和 纵 轴 的 缩放 因子 ， 它 们 都 必须 是 正 值 。 值 比 1.0 小 表示 缩小 ， 比 
1.0 大 则 表示 放大 ， 值 为 1.0 时 表示 什么 效果 都 不 体现 。 人 











代码 清单 4-15: 使 用 scale 实现 缩放 功能 
<!DOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function draw()1 
var ctx = document.getElementById('myCanvas').getContext('2d"); 
ctx.fillStyle = "Blue"; 
ctx.fillRect(0,0,80,80); 
ctx.translate(80,80); 
ctx.scale(0.5,0.5); 
ctx.fillRect(0,0,80,80); 
j 
</script> 
</head> 
<body onLoad="draw()"> 
<canvas id="myCanvas" width="160" height="160" style="border:solid 1px #000000;"> 
Your browser does not support the canvas element. 
</canvas> 
</html> 


ARIETE Opera 浏览 器 中 的 显示 效果 如 图 4-14 PZR o 


4.6.4 HERE 


rotate (angle) 方法 能 够 以 原点 为 中 心 旋 转 canvas。 这 个 方法 只 
接受 一 个 参数 ， 束 是 旋转 的 角度 (angle. "XEM EF; HJ. LÀ 
牟 度 为 单位 的 值 。 旋 转 的 中 心 点 始终 是 canvas 的 原点 ， 如 果 要 改 
变 它 ， 需 要 用 translate 方法 。 图 4 14 BWAR 








代码 清单 4-16: 使 用 rotate 实现 画布 的 旋转 
<IDOCTYPE HTML> 
<html> 
<head> 
«script type-"text/javascript" 
function draw()1 
var ctx = document.getElementById('myCanvas').getContext('2d"); 
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ctx.fillStyle = "Blue"; 
ctx.fillRect(0,0,60,60); 
ctx.translate(60,60); 
ctx.rotate(0.8); 
ctx.fillRect(0,0,60,60); 
j 
</script> 
</head> 
<body onLoad="draw()"> 
<canvas id="myCanvas" width="145" height="145" style="border:solid 1px #000000;"> 
Your browser does not support the canvas element. 
</canvas> 
</body> 
</html> 





代 人 码 在 Opera 浏览 器 中 的 显示 效果 如 图 4-15 所 示 。 


| 4.7 È% 


使 用 上 下 文 属 性 globalCompositeOperation 不 仅 可 以 在 已 有 图 形 
后 和 面 再 男 新 网 形 ， 还 可 以 用 来 诞 兽 、 清 除 采 些 区 域 。 上 和 下文 属 性 图 4-15 ”旋转 效果 
globalCompositeOperation 的 值 见 表 4-2. 





表 4-2 globalCompositeOperation 的 值 及 效果 


























XOT 


R 性 od 说 明 TE 
source-over 新 图 形 会 槛 盖 在 原 有 内 容 之 上 ， 为 默认 设置 [| 
source-in BERUEGUB ILES ECT WARANA. JH DC OE HA ai 
source-out AERA MEETS RE NARREN AY AWAK J 
source-atop 新 图 形 中 与 原 有 内 容重 登 的 部 分 会 被 绘制 ， 并 歼 盖 于 原 有 内 容 之 上 a 
destination-over 会 在 原 有 内 容 之 下 绘制 新 图 形 J 
destination-in 原 有 内 容 中 与 新 图 形 章 合 的 部 分 会 修 保 留 ， 其 他 区 域 都 变 成 透明 的 él 
destination-out ctr deep EEUU EE DU PE IRR P 
destination-atop 原 有 内 容 中 与 新 内 容重 天 的 部 分 会 被 保留， 并 会 在 原 有 内 容 之 下 绘制 新 图 形 » 
lighter 两 图 形 中 重 基部 分 作 加 色 处 理 n 
darker STRUD TERR DUE ERE IR a 
copy 只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 Q 

D 
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代码 清单 4-17: 利用 globalCompositeOperation 属性 实现 遮盖 
«IDOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function draw(){ 
var ctx = document.getElementById('myCanvas').getContext('2d'); 
ctx.fillStyle = "#09f"; 
ctx.fillRect(15,15,70,70); 
ctx.globalCompositeOperation ="source-over"; 
ctx.fillStyle = "#f30"; 
ctx.beginPath(); 
ctx.arc(75,75,35,0, Math.PI*2,true); 
ctx.fill(); 


j 
</script> 
</head> 
<body onLoad="draw();"> 
«canvas 1d="myCanvas" ></canvas> 
</body> 
</html> 


E. 绘制 简单 动画 


HTMLS 还 有 一 个 重要 的 功能 就 是 利用 脚本 操控 canvas 对 象 以 实现 动画 效果 。 有 目前 
HTMLS 还 不 能 完全 取代 Flash， 不 过 随 着 HTMLS 的 发 展 ， 将 彻底 颠覆 现 有 的 网 页 前 端 体 
系 。 许 多 浏览 器 广 商 也 频频 更 狐 浏 览 器 的 版 本 ， 以 便 更 好 地 支持 HTMLS. 

HTMLS 实现 动画 需要 以 下 步骤: 

(1) 清空 canvas。 除 非 接 下 来 要 男 的 内 容 会 完全 充满 canvas 〈 例 如 背景 网 )， 人 否则 需要 
清空 所 有 内 容 。 最 简单 的 做 法 束 是 用 clearRect 方法 。 

(2) 保存 canvas 状态 。 如 果 要 改变 一 些 会 改变 canvas 状态 的 设置 〈 如 样式 、 变 形 等 )、 
又 要 在 每 国 一 帧 之 时 都 是 原始 状态 的 话 ， 需 要 先 对 canvas 状态 进行 保存 。 

(3) 绘制 动画 图 形 。 这 一 步 才 是 重 绘 动 画 帧 。 

(4) 恢复 canvas 状态 。 如 果 已 经 保存 了 canvas 的 状态 ， 可 以 先 恢复 它 ， 然 后 重 绘 
— Wi « 

有 了 两 种 方法 可 以 执行 重 绘 ， 以 实现 动画 操控 。 首 先 可 以 通过 setInterval (animateShape, 
time) 或 setTimeout (animateShape,time) 方法 来 控制 在 议定 的 时 间 点 上 执行 重 绘 

如 果 不 需 要 任何 交互 操作 ， 用 setInterval 方法 定时 执行 重 绘 比 较 适 合 。setTimeonut 方法 
只 会 在 预 设 时 间 点 上 执行 操作 。 

setTimeout (animateShape,time) 方法 可 以 利用 用 户 输 入 来 实现 操控 。 如 果 和 需要 做 一 个 游 
戏 ， 可 以 通过 览 听 用 户 交 互 过程 中 触发 的 事件 (如 keyboard, mouse) 来 控制 动画 效果 。 
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代码 清单 4-18: 实现 球体 沿 着 圆 形 轨 道 运转 的 动画 
«IDOCTYPE HTML> 
<html> 
<head> 
«script type="text/javascript"> 
var ball = new Image(); 
function init() 
ball.src = 'images/ball.png'; 
setInterval(draw,50); 
j 
function draw() { 
var ctx = document.getElementById('mycanvas').getContext('2d'); 
ctx.globalCompositeOperation = 'destination-over'; 
ctx.clearRect(0,0,300,300); /请 除 画 布 
ctx.strokeStyle —"blue"; 
ctx.save();// 保 存 状态 
ctx.translate(150,150); 
/动态 设置 旋转 角度 
var time — new Date(); 
ctx.rotate( ((2*Math.PTI)/60)*time.getSeconds()-((2*Math.PT)/60000)*time.getMilliseconds()); 
ctx.translate(105,0); 
ctx.drawImage(ball,-9,-9); /绘制 球体 
/绘制 轨道 
ctx.restore(); 
ctx.beginPath(); 
ctx.arc(150,150,105,0, Math. PT*2, false); 
ctx.stroke(); 
j 
</script> 
</head> 
«body onLoad="init();"> 
«canvas id="mycanvas" width="300" height="300" style="border: 1px solid #000;"></canvas> 
</body> 
</html> 





ARISTE Opera 浏览 器 中 的 显示 效果 如 图 4-16 所 示 。 


图 4-16 sj 
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网 页 中 的 每 个 元 率 都 可 以 产生 某 些 可 以 触发 JavaScript 函数 的 事件 。 发 生 事件 的 类 型 不 
同 ， 生 成 的 事件 类 型 也 不 同 。 例 如 ， 用 户 单 击 submit 按钮 时 会 产生 一 个 onClick 事件 来 触发 
某 个 函数 。 事 件 处 理 是 面 问 对象 编程 的 重要 环节 ， 使 程序 变 得 更 灵活 。 

HTML 支持 事件 触发 浏览 器 中 的 动作 ， 比 如 当 用 户 单 击 某 个 HTML 元 素 时 局 动 一 段 
JavaScript 事件 。 通 常 与 函数 配合 使 用 ， 当 事件 发 生 时 函数 才 会 执行 ， 一 般 用 特定 的 自 定 义 
函数 来 处 理事 件 。 


|51 事件 处 理 方式 


511 监听 方式 


1. addEventListener 

addEventListener 用 于 注册 事件 处 理 程序 ， 事 件 类 型 可 随意 指定 。 例 如 click. 
mousemove, mouseup 等 。 在 IE 中 为 attachEvent， 但 不 是 W3C 标准 ， 在 此 不 作 介绍 。 

语法 格式 : 


target.addEventListener(type, listener, useCapture); 









































target PJ EXE CEA Ei. document. window 或 XMLHttpRequest。addEventListener 方法 
带 有 如 下 三 个 必 选 的 参数 : 

(1) type: 事件 类 型 ， 如 click、keyup、mousemove。 使 用 addEventListener 绑 定 事件 
时 ， 议 置 参数 事件 类 型 时 不 必 写 on FUS HE 

(2) listener: HF HJAR HE KZ 

(3) useCapture: 该 参数 是 一 个 布尔 值 false 或 true. true 代表 支持 浏览 器 事件 捕获 功 
fE, false 代表 支持 浏览 器 事件 骨 泡 功能 。 





代码 清单 5-1: 监听 方式 举例 
<!DOCTYPE HTML- 
<html> 
<head> 
</head> 
<script type="text/Javascript"> 
function process Info()( alert("Hello World!! "); } 
window.addEventListener("click",process Info,false); 
</script> 
<body> 
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«input id="btn" type="button" value=" EZ" /> 
</body> 
</html> 


当 一 个 事件 发 生 时 ， 分 为 三 个 阶段 : 

(1) 捕获 阶段 : 从 根 贡 点 开始 顺序 而 下 ， 检 测 每 个 节点 是 否 注 册 了 事件 处 理 程 序 。 如 果 
注册 了 事件 处 理 程序 ， 并 且 useCapture 为 ttue， 则 调用 该 事件 处 理 程 序 (IE 中 无 此 阶段 )。 

(2) 目标 阶段 : 触发 在 目标 对 象 本 身 注 册 的 事件 处 理 程序 。 

G) 冒 泡 阶 段 ， 从 目标 市 点 到 根 节 点 ， 检 测 每 个 市 点 是 奋 注 册 了 事件 处 理 程 序 ， 如 果 注 
册 了 事件 处 理 程序 ， 并 用 useCapture 为 false， 则 调用 该 事件 处 理 程序 。 


代码 清单 5-2: 冒 泡 阶 段 事件 处 理 检 测 
<!DOCTYPE HTML- 
<html> 
<head> 
<link rel="stylesheet" href="5-1.css"> 
<script language="javascript" type="text/Javascript"> 
function loadDemo() { 
var outDiv = document.getElementById("outDiv"); 
var midDiv = document.getElementById("midDiv"); 
var inDiv = document.getElementById("inDiv"); 
var info = document.getElementById("show Info"); 
function load Out() ( document.getElementById(info.innerHTML +=" 处 层 " + "<br>"); } 
function load MidO{ document.getElementByld(info.innerHTML +=" HP [RH] ZZ" + "<br>"); } 
function load In() ( document.getElementById(info.innerHTML +=" 内 层 " + "cbr»"); } 
outDiv.addEventListener("click",load Out, false); 
midDiv.addEventListener("click", load Mid, false); 
inDiv.addEventListener("click", load In, false); 
j 
</script> 
</head> 
«body onLoad="loadDemo()"> 
<div id="outDiv"> 
<div id="midDiv"><div id="inDiv"></div></div> 
</div> 
<div id="show_Info"></div> 
</body> 


</html> 


ARIETE Opera i| Ti ssp HJ A ZR CR AE 5-1 PR. 

addEventListener 方法 的 useCapture 参数 为 false, 24H] fa 
“最 内 层 ” 目 标 时 ， 触 发 顺序 为 “内 层 一 中 间 层 一 外 层 ” INPS 
击 “ 中 间 层 ”目标 时 ， 和 触发 顺序 为 “中 间 层 一 外 层 ?; 当 用 户 单 击 
“外 层 ” 目 标 时 ， 触 发 顺序 为 “外 层 ” 




















图 5-1 监听 方式 效 末 


46 


事件 处 理 | $5* 


2. removeEventListener 

与 addEventListener 注册 事件 处 理 程序 相反 ， 可 以 使 用 removeEventListener 方法 在 网 页 中 
注销 事件 。 值 得 注意 的 是 ， 只 有 极 addEventListener 方法 注册 的 事件 才 可 以 使 用 removeEvent 
Listener 来 注销 。 如 果 是 直接 写 在 元 素 内 的 事件 ， 将 无 法 使 用 removeEvent Listener 来 注销 。 

语法 格式 : 


target. removeEventListener (type, listener, useCapture); 




















target HJ EA ZE XC P4 si. document, window 或 XMLHttpRequest. removeEventListener 
方法 市 有 如 下 三 个 必 选 的 参数 : 

(1) type: 事件 类 型 ， 如 click、keyup、mousemove。 使 用 removeEventListener 注销 绑 
定 事 件 时 ， 设 置 参 数 事件 类 型 时 不 要 写 on， 人 否则 会 出 钳 。 

(2) listener: 事件 的 处 理 函 数 。 

(3) useCapture: false 表示 文 持 浏 览 需 事件 肯 泡 功能 ， 人 否则 不 文 持 。 

在 代码 清单 5-2 中 ， 如 果 想 注销 控 “ 中 间 层 ”的 事件 ， 可 以 通过 下 面 的 语句 完成 : 


midDiv.removeEventListener("click",load Mid,false); 











5.1[2. ”赋值 方式 


赋值 方式 的 其 中 一 种 是 直接 赋值 的 方式 ， 这 种 方式 使 用 相对 较 多 。 即 当 “XXX 事件 ” 
航 触 用 时 ， 调 用 事件 处 理 函 数 。 

语法 格式 : 

on 事件 名 =" 处 理 函 数 " 





代码 清单 5-3: 赋值 事件 处 理 方 式 
«script type-"text/Javascript" 
function loadDemo()( alert("Hello World!! ") | 

</script> 

</head> 

<body> 

<input id="btn" type="button" value=" 单 击 触发 " onClick="loadDemo()"> 

</body> 


| 5.2 HTML5 常用 事件 


52. 表单 事件 


表单 事件 是 指 由 HTML 表单 内 部 的 动作 触 友 的 事件 ， 适 用 于 所 有 HTMLS 元 素 ， 不 过 最 
党 用 于 表单 元 素 中 。 

PHL onsubmit 表单 事件 属性 为 例 进 行 资 明 。 当 在 一 个 表单 中 完成 信息 输入 后 ， 单 击 
“提交 ” (submit 按钮 ， 触 发 onsubmit 事件 。 
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代码 清单 5-4: 当 提 交 表 单 时 ， 触 发 JavaScript 事件 处 理 程 序 


<!DOCTYPE HTML- 
<html> 
<head> 
<script type="text/Javascript"> 
function on submit(){ 
var userName-document.getElementById("userName").value; 
var pwd-document.getElementById("pwd").value; 
var matchResult-true; 
if(userName--""|pwd--"")1 
alert(" 请 确认 用 户 名 和 密码 不 能 为 空 ! "); 
matchResult-false; 
;return matchResult; 
j 
</script> 
</head> 
<body> 
«form name-"login" onsubmit="return on submit()" method="post" action="result.aspx"> 
<table bgcolor="#0099FF"> 
«tr align="center"><td colspan="2"> 用 户 登 录 </td></tr> 
<tr> 
<td> 用 户 名 : </td> 
<td><input id-"userName" name="userName" type="text" ></td></tr> 
<tr> 
«td >% &nbsp;&nbsp;fij: </td> 
<td><input id="pwd" name="pwd" type="password" ></td></tr> 
<tr align="right"> 
«td colspan="2"><input type="submit" value=" %f >"> 
<input type="button" value=" t &" onClick="reset()"></td> </tr> 
</table> 
</form> 
</body> 
</html> 





表单 


事件 属性 见 表 5-1. 


表 5-1 表单 事件 属性 








‘m 性 值 说 — Hj 
onblur 当 元 素 失 去 焦点 时 运行 脚本 
onchange 当 元 素 改变 时 运行 脚本 
oncontextmenu 当 触 发 上 下 文 菜 单 时 运行 脚本 
onfocus 当 元 素 获 得 焦点 时 运行 脚本 
onforminput 当 表 单 获得 用 户 输入 时 运行 脚本 
oninput 当 元 素 获 得 用 户 输入 时 运行 脚本 
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CBE) 
属 TE 值 说 Hj 
onformchange 当 表单 改变 时 运行 脚本 
oninvalid 当 元 素 无 效 时 运行 脚本 
onreset 当 表 单 重 置 时 运行 脚本 。HTMLS5 不 支持 
onselect 当选 取 元 素 时 运行 脚本 
onsubmit 当 提 交 表 单 时 运行 脚本 


52.2 ”键盘 事件 

键盘 事件 殉 是 当 使 用 键盘 操作 时 触发 的 事件 。 如 按 下 键盘 键 、 释 放 键 盘 键 等 。 种 见 的 事 
件 处 理 需 包括 onkeydown. onkeyup. onkeypress. FIHLA onkeydown 为 例 进 一 步 说 明 。 

当 按 下 键盘 的 某 个 键 时 触发 onkeydown 事件 ， 其 语法 结构 为 : 

onkeydown="“ 当 事件 发 出 时 所 执行 的 脚本 ” 

所 文 持 的 JavaScript 脚本 对 象 包括 : 文档 、 图 人像、 链接 以 及 文本 。 








代码 清单 5-5: 键盘 事件 实例 
<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/Javascript"> 
function KeyEventTest(e){ 
if (window.event) (//IE 浏览 器 
document.write(" 你 触发 键盘 的 键 值 为 : "+e.keyCode ); 
} else if(e.which) {// Netscape/Firefox/Opera 浏览 如 
document.write(" 你 触发 键盘 的 键 值 为 : "+e.which ); } 








} 
</script> 
</head> 
<body> 
«input type-"text" onkeydown="return KeyEventTest(event)" /> 
</body> 


</html> 


代码 分 析 : 

这 上 段 代 人 码 定义 了 一 个 文本 框 ， 当 用 键盘 对 文本 框 进行 输入 操作 或 者 按 下 任意 键 时 ， 输 出 
所 投下 键 的 键 值 。 例 如 ， 当 按 下 回 车 键 ， 则 会 显示 回 
车 键 的 键 码 值 ， 如 图 5-2 所 示 。 [ | | 你 创 发 键盘 的 键 值 为 ，]13 

IE 用 event.keyCode 来 获取 补 按 下 的 投 键 值 ， 而 
Firefox/Opera 使 用 的 则 是 event.which. 

键盘 事件 属性 见 表 5-2. 











K|5-2 onkeydown 键盘 操作 
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R52 键盘 事件 属性 


属 性 值 说 Hj 
onkeydown 当 按 下 按键 时 运行 脚本 

onkeypress 当 按 下 并 松 开 投 键 时 运行 脚本 

onkeyup 当 松 开 按键 时 运行 脚本 


5.2.3. ”鼠标 事件 














BRUN 
in Ez) 
下 面 
MR 


事件 是 最 常用 的 事件 之 一 ， 即 通过 鼠标 对 事件 进行 触发 。 鼠 标的 动作 包括 单 击 、 双 
、 释 放 、 滚 动 、 悬 停 等 。 

以 onmousedown 为 例 进 一 步 说 明 。 

下 鼠标 键 时 触发 onmousedown 事件 ， 所 支持 的 脚本 对 象 〈 应 用 对 象 ) 包括 文档 、 





按钮 、 链 接 等 。 


代码 清单 5-6: 用 电 标 单 击 文本 触发 事件 处 理 范 效 


<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/Javascript"> 
function onMouseDownTest(){ alert(" WARE IZAR! ")} 

</script> 
</head> 
<body> 

<input type="text" name="mouseEventTest" value=" 单 击 触 发 " onmousedown-"onMouseDown 
Test()"> 
</body> 
</html> 





由 鼠标 或 相似 的 用 户 动 作 触 肥 的 事件 ， 适 用 于 所 有 HTML5 元 素 。 鼠 你 事 件 属性 见 表 5-3。 


表 5-3 ”鼠标 事件 














‘m 性 值 说 明 
onclick 当 单 击 鼠标 时 运行 脚本 
ondblclick 当 双 击 鼠 标 时 运行 脚本 
ondrag 当 拖 动 元 素 时 运行 脚本 
ondragend 当 拖 动 操作 结束 时 运行 脚本 
ondragenter 当 元 素 被 拖 动 至 有 效 的 拖 放 目标 时 运行 脚本 
ondragleave 当 元 素 离开 有 效 拖 放 目 标 时 运行 脚本 
ondragover 当 元 素 被 拖 动 至 有 效 拖 放 目 标 上 方 时 运行 脚本 
ondragstart 当 拖 动 操作 开始 时 运行 脚本 
ondrop 当 被 拖 动 元 素 正 在 被 拖 放 时 运行 脚本 
onmousedown 当 按 下 鼠标 按钮 时 运行 脚本 
onmousemove 当 鼠 标 指 针 移动 时 运行 脚本 
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CHE) 
E E E 说 Hj 

onmouseout 当 鼠 标 指针 移出 元 素 时 运行 脚本 

Onmouseover 当 鼠 标 指针 移 人 至 元 素 之 上 时 运行 脚本 

onmouseup 当 松 开 鼠标 按钮 时 运行 脚本 

onmousewheel 当 转 动 鼠 标 滚轮 时 运行 脚本 

onscroll 当 滚 动 元 素 的 滚动 条 时 运行 脚本 





5.2.4 ”媒体 事件 


媒体 事件 可 以 作用 于 各 种 媒体 元 素 ， 如 视频 、 音 频 、 图 片 等 。HTMLS 的 媒体 事件 允许 
用 户 通 过 JavaScript 对 媒体 进行 有 效 控制 。HTML5 的 常用 媒体 事件 见 表 5-4. 














X 5-4 HTML5 常用 媒体 事件 











mo d 说 — Hj 
onloadstart 浏览 器 开始 请 求 媒 体 
onprogress 浏览 器 正在 获取 媒体 
onsuspend 浏览 器 已 获取 媒体 数据 ， 但 在 取 回 整个 媒体 文件 之 前 停止 
onabort 浏览 器 在 完全 加 载 前 中 止 获取 媒体 数据 
onerror 获取 媒体 数据 出 错 
onemptied 媒体 资源 元 素 突然 未 空 时 〈 网 络 错误 、 加 载 错误 等 ) 
onstalled TU] V a S BUM E T 
onplay 即将 开始 播放 
onpause 暂停 播放 
onloadedmetadata 浏览 器 获取 完 媒 体 资 源 的 时 长 和 尺寸 
onloadeddata 已 加 载 当前 播放 位 置 的 媒体 数据 
onwaiting 播放 由 于 下 一 帧 无 效 ( 例 如 未 加 载 ) 而 已 停止 (但 浏览 器 确认 下 一 帧 会 马上 有 效 ) 
onplaying 己 经 开始 播放 
oncanplay 浏览 器 能 够 开始 媒体 播放 ， 但 估计 以 当前 速率 播放 不 能 直接 将 媒体 播放 完 〈 播 放 期 间 需 要 缓冲 ) 
oncanplaythrough 浏览 器 估计 以 当前 速率 直接 播放 可 以 直接 播放 完整 个 媒体 资源 〈 期 间 不 需要 缓冲 ) 
onseeking 浏览 器 正在 请 求 数据 (seeking 属性 值 为 true) 
onseeked 浏览 器 停止 请 求 数据 (seeking 属性 值 为 false? 
ontimeupdate 当前 播放 位 置 (currentTime 属性 ) 改变 
onended 播放 由 于 媒体 结束 而 停止 
onratechange 默认 播放 速率 (defaultPlaybackRate 属性 ) 改变 或 播放 速率 (playbackRate JEPE) 改变 
ondurationchange 媒体 时 长 Cduration 属性 ) 改变 
onvolumechange 音量 (volume 属性 ) 改变 或 静音 (muted 属性 ) 
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代码 清单 5-7: 在 不 指定 control 属性 时 ， 通 过 canplay 事件 播放 媒体 

<!DOCTYPE HTML- 

<html> 

<head> 

<script type="text/javascript"> 

function startVideo() 1 
var v = document.getElementsBy TagName(" video")[0]; 
v.play(); 

j 

</script> 

</head> 

<body> 

«video id="clickVideo" src-"movie/movie.ogg" oncanplayz"'startVideo()'" width="320" height= 

"240" > 

RAIN AAAS E vide 标签 ! 

</video> 

</body> 

</html> 


5.2.5 window 事件 
window 事件 是 指 window 对 象 触 皮 的 事件 ， 适 用 于 body 标签 。window 事件 属性 见 表 5-5. 





表 5-5 window 事件 属性 




















m 性 值 说 明 
onafterprint 在 打印 文档 之 后 运行 脚本 
onbeforeprint 在 文档 打印 之 前 运行 脚本 
onbeforeonload 在 文档 加 载 之 前 运行 脚本 
onblur 当 窗 口 失 去 焦点 时 运行 脚本 
onerror 当 错误 发 生 时 运行 脚本 
onfocus 当 窗口 获得 焦点 时 运行 脚本 
onhaschange 当 文 档 改 变 时 运行 脚本 
onload 当 文 档 加 载 时 运行 脚本 
onmessage 当 触 发 消息 时 运行 脚本 
onoffline 当 文 档 离 线 时 运行 脚本 
ononline 当 文 档 上 线 时 运行 脚本 
onpagehide 当 窗 口 隐 藏 时 运行 脚本 
onpageshow 当 窗 口 可 见 时 运行 脚本 
onpopstate 当 窗 口 历史 记录 改变 时 运行 脚本 
onredo 当 文 档 执行 再 执行 操作 Credo) 时 运行 脚本 
onresize 当 调整 窗口 大 小 时 运行 脚本 
onstorage 当 文 档 加 载 时 运行 脚本 
onundo 当 Web Storage 区 域 更 新 时 (存储 空间 中 的 数据 发 生变 化 时 ) 运行 脚本 
onunload 当 用 户 离 开 文 档 时 运行 脚本 
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代码 清单 5-8: 调整 窗口 大 小 ， 触 发 事件 
«IDOCTYPE HTML> 
<html> 
<head> 
</head> 
<script type="text/Javascript"> 

function loadDemo(){ alert(" 你 调整 了 窗口 大 小 !! "y; 

</script> 
<body onReslze= "loadDemo() > 
</body> 
</html> 





事件 处 理 


第 52x 


o3 


"E625 HTMLS 选择 器 


6.1 传统 的 DOM BAAR 





可 通过 知 干 种 方法 来 在 找 希 望 操作 的 元 率 : 
B 使 用 getElementById(. getElementsByName(). getElementsByTagName()77 1: 
B 使 用 一 个 元 素 节 点 的 parentNode、firstChild 以 及 lastChild 属性 。 


6.1.1 使 用 JavaScript 方法 查找 


在 HTMLS 之 前 ， 在 页 面 租 找 特定 元 素 的 图 数 有 : getElementById(). getElementsBy 
Name(). getElementsByTagName(). 

1. getElementByld O 

getElementById()7; 1548 35 ID 值得 找 并 返回 元 素 ， 该 方法 可 得 找 整 个 HTML 文档 中 的 任 
何 HTML 元 素 。 

语法 : 

document.getElementById("ID"); 


getElementById 方法 只 能 运行 在 document 对 和 象 下 ， 从 页 面 文档 内 找 出 id 属性 值 等 于 参 
ZI) 7G 38 e 





























代码 清单 6-1: 使 用 getElementByld 方法 查找 特定 的 元 素 
-------- 省 略 无 关 代 码 -------- 


«script type="text/Javascript"> 





function loadDemo(){ 
var info = document.getElementById("c div"); 
alert(info.innerHTML); 
j 

</script> 

</head> 

<body> 

<div id-"c div" onClick-"loadDemo()"» ri iti3x H «/div- 
</body> 


2. getElementsByName() 

getElementsByTagName() 方 法 会 使 用 指定 的 标签 名 返回 所 有 的 元 素 ， 该 方法 可 用 于 任何 
HTML 元 素 。 

语法 : 
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document.getElementsByName("name") 


因为 一 个 文档 中 的 name 属性 可 能 不 唯一 〈 如 HTML 表单 中 的 单 选 按钮 通常 具有 相同 的 
name 属性 )， 所 以 getElementsByName() 方 法 返回 的 是 元 素 的 数组 ， 而 不 是 一 个 元 素 。 

getElementsByName 与 getElementById 关 似 ， 都 是 用 来 在 网 页 内 奏 找 获取 元 系 ， 但 是 二 
者 是 有 区 别 的 。getElementByld 方法 是 根据 元 素 的 id 值 进行 查找， 并 且 只 获取 唯一 的 。 例 如 
网 页 中 有 mn 个 元 素 的 id 值 属性 是 一 样 的 ，getElementById 只 获取 其 中 一 个 。 

而 getElementsByName 方法 是 根据 元 素 的 name 属性 值 来 租 找 ， 并 且 可 以 获取 多 个 元 
素 。 如 果 网 页 中 有 n 个 元 素 的 name 值 是 一 样 的 ， 那 么 getElementsByName 将 全 部 获取 ， 并 
以 数组 的 方式 来 返回 对 这 mn 个 元 素 的 引用 。 






























































代码 清单 6-2: 使 用 getElementsByName() 查 找 元 素 
-------- 省 略 无 关 代 码 -------- 


«script type-"text/Javascript" 





function get Elements()1 
var arr-document.getElementsByName("' show"); 
for(var 1-0; 1«arr.length; 1++){ 
arr[i].style.background-"Z00F"; 
j 
j 
</script> 
</head> 
<body > 
«p name="show"> 显 示 区 域 一 </p> 
«div name="show'"> 显 示 区 域 二 </div> 
«input type="button" name-"btn" value-" fff iA" onClick-"get ElementsO"/> 
</body> 
</html> 


3. getElementsByTagName() 

getElementsByTagName0 方 法 可 返回 市 有 指定 标签 名 的 对 象 的 集合 ， 返 回 元 素 的 顺序 是 
它们 在 文档 中 的 顺序 。 

语法 : 

















document.getElementsByTagName("tagname") 


RIRA ERI rf EGA getElementsByTagName0 方 法 ， 它 将 返回 文档 中 所 有 元 素 的 
列表 ， 元 素 排列 的 顺序 就 是 它们 在 文档 中 的 顺序 。 














代码 清单 6-3: 返回 标签 名 称 与 指定 值 匹配 的 元 素 
Em 省 略 无 关 代码 -------- 


<script type="text/Javascript"> 





function get Elements(){ 
var arr= document.getElementsBy TagName("'' div"); 
for(var 1—0; i«arr.length; i++) { 
arr[i].style.border-" 1px dashed pink"; 
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j 
</script> 
</head> 
<body> 
<div style="height:120px;width:120px;"> </div> 
<input type="button" value=" 添 加 边框 " onClick="get_Elements()"/> 
</body> 





6.1.2 ”使 用 元 素 世 点 属 性 查找 


通过 使 用 一 个 元 素 节 点 的 parentNode、firstChild 以 及 lastChild 属性 可 查找 文档 中 的 元 
R.o WA MMA HTML Hr E: 
<table id="tb"> 
«tr id-"tr" > 
«td id="td1">ASP.NET</td> 
«td id="td2">HTML5</td> 
«td id="td3">Ajax</td> 
</tr> 


</table> 


在 上 面 的 HTML 代码 中 ， 第 一 个 <td> 是 <tr> 元 素 的 第 一 个 子 元 素 (firstChild)， 而 最 后 
一 个 <td> 是 <tr> 元 素 的 最 后 一 个 子 元 素 ClastChild). 

1. parentNode 

parentNode 称 为 父 廊 点， 如果 当 前 元 素 为 子 元 素 〈 如 id 为 “tdl1” 的 第 一 个 子 元 素 )， 则 
可 以 通过 下 和 面 的 方式 访问 父 元 系 。 

var td = document.getElementById("td1"); 

document.write( td.parentNode.1d); 

2. firstChild 

firstChild 称 为 第 一 个 子 元 妹 ， 如 采 当 前 元 素 为 父 级 元 素 〈 如 id 为 “tr” 的 父 级 节点 元 
素 )， 则 可 以 通过 下 面 的 方式 访问 第 一 个 子 元 妹 。 

var tr= document.getElementById("tr1"); 

document.write ( tr.firstChild.id); 


3. lastChild 
lastChild n] EAXEA&A P 763 PRAH — T T2038, UAR TAB UGERUACERZUSR CU id 为 
“tr” 的 父 级 节点 元素)， 则 可 以 通过 下 和 面 的 方式 访问 最 后 一 个 子 元 素 。 


var tr = document.getElementByld("tr1"); 
document.write ( tr.lastChild.id); 


4. RTA 
有 两 种 特殊 的 文档 属性 可 用 来 访问 根 节 点 : 


document.documentElement 
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document.body 


第 一 个 属性 可 返回 存在 于 XML 以 及 HTML 文档 中 的 文档 根 节点 。 
第 二 个 属性 是 对 HTML 页 面 的 特殊 扩展 ， 提 供 了 对 <body> 标 签 的 直接 访问 。 


| 6.2 新 的 Selectors API 


HTMLS 引入 了 一 种 用 于 答 找 页 面 DOM TRAI. A TIHI Selectors API， 可 以 用 更 
精确 的 方式 来 指定 希望 获取 的 元 么 ， 而 不 必用 标准 的 DOM 方式 过 有 历 。 

W3C 规范 定义 了 两 个 新 的 方法 CquerySelector 和 querySelectorAll) 来 获取 元 素 季 点 ， 
这 两 个 方法 都 接受 选择 符 作 为 目 己 的 参数 。 这 样 极 大 地 方便 了 开发 者 ， 使 用 它们 可 以 像 使 用 
CSS 选择 器 一 样 快 速 地 得 找到 需要 的 节点 。 

目前 几乎 所 有 主流 浏览 噩 均 文 持 它 们 。 包 括 IE8( 含 ) 以 上 版 本 、Firefox、Chrome、 
Safari、Opera 等 。 


querySelector 和 querySelectorAll 在 规范 中 定义 了 如 下 接口 : 


























module dom { 

[Supplemental, NoInterfaceObject] 

interface NodeSelector 1 
Element querySelector(in DOMString selectors, in optional Element refElement); 
Element  querySelector(in DOMString selectors, in sequence<Node>? refNodes); 
NodeList querySelectorAll(in DOMString selectors, in optional Element refElement); 
NodeList querySelectorAll(in DOMString selectors, in sequencecNode^? refNodes); 

h 

Document implements NodeSelector; 

DocumentFragment implements NodeSelector; 

Element implements NodeSelector; 


上 上 
其 实 任何 NodeList、Element 的 实例 对 象 和 Document DocumentFragment 的 实例 对 象 都 
有 这 两 个 方法 。 如 : 


document.querySelectorAll 





document.querySelector 
nodeList.querySelectorAll 
nodeList.querySelector 
element.querySelectorAll 
element.query Selector 


| 6.3 ”使 用 Selectors API 


6.3.1 querySelector 方法 
querySelector(0) 方 法 根据 指定 的 选择 表达 了 式 ， 返 回 在 页 面 中 找到 的 第 一 个 匹配 元 素 。 如 果 
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没有 匹配 的 元 系 则 返回 null. iX HOBXETERGAIUE Rb AHE SH CSS3 选择 大 组 。 
语法 : 


var element = document.querySelector(selectors); 


querySelector0) 方 法 的 参数 须 是 符合 CSS Selector 规则 的 字符 串 。 下 面 对 以 下 代码 卢 段 进 
行 研究 : 

<!DOCTYPE HTML> 

<html> 

<head> 

<style type="text/css"> 

.red { color: Red; } 

.blue { color: Blue; } 

</style> 

</head> 

<body> 

«div id="div1" class="red"> F 
«div class="red"> 北 京 </div> 
«div class="blue"> 天 津 </div> 
«div class="red"> 上 海 </div> 
«div class="blue"> 重 庆 </div> 
<p> 天 津 </p> 

</div> 

</body> 

</html> 


在 上 面 的 代码 片段 中 ， 如 果 想 获取 body 元 素 ， 可 以 通过 下 面 的 语句 完成 : 
var body = document.querySelector("body"); 

如 果 想 获取 第 一 个 id EX divl 的 元 素 节 点 ， 可 以 通过 下 和 耐 的 语句 来 完成 : 
var elm=document.querySelector("#div1"); 

如 果 想 获取 第 一 个 class 值 为 red 的 元 聚 节点 ， 可 以 通过 下 面 的 语句 完成 : 
var elm-document.querySelector(".red"); 

A AES class 值 为 red 7628 8155] p 元 素 ， 可 以 通过 下 面 的 语句 完成 : 
var elm-document.querySelector(".red p"); 

如 朱 想 获取 id 值 为 divl 元 素 的 第 一 个 子 元 泰 市 尽 ， 可 以 通过 下 面 的 语句 完成 : 
var elm-document.querySelector("div div.red"); 

当然 ， 也 可 以 这 样 完成 : 

var elm-document.querySelector(".red").querySelector(" .red ); 


可 以 为 Selector API 函数 同时 指定 多 个 选择 规则 ， 如 选择 文档 中 类 名 为 red 或 blue 的 第 
=A R 
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var elm=document.querySelector(".red",".blue") 
下 面 给 出 完整 的 代码 清单 6-4。 


代码 清单 6-4: 完整 代码 
<!DOCTYPE HTML> 
<html> 
<head> 
<style type="text/css"> 
.red { color: Red; } 
.blue { color: Blue; } 
</style> 
</head> 
<body> 
<div id="div1" class="red"> F 
«div class="red"> 北 京 </div> 
«div class="blue"> 天 津 </div> 
«div class="red"> 上 海 </div> 
«div class="blue"> 重 庆 </div> 
«p» Bj </p> 
</div> 
<input type="button" name="btn1" value="addBorder1" onclick="addBorder10"/> 
<input type="button" name="btn2" value="addBorder2" onclick-"addBorder2()"/7 
<input type="button" name="btn3" value-"addBorder3" onclick="addBorder3()"/> 
<input type="button" name="btn4" value-"addBorder4" onclick-"addBorder4()"/7 
<input type="button" name="btn5" value="SetBody" onclick="setBody()"/> 
«script type="text/javascript"> 
function addBorder1(){ 
var elm=document.querySelector("#div1"); 
elm.style.border=" 1px dashed pink"; } 
function addBorder2(){ 
var elm=document.querySelector(".red"); 
elm.style.border=" 1px dashed pink"; } 
function addBorder3(){ 
var elm=document.querySelector(".red p"); 
elm.style.border=" 1px dashed pink"; } 
function addBorder4()( 
var elm-document.querySelector(".red").querySelector(" .red"); 
elm.style.border-"lpx dashed pink"; } 
function setBody()1 
var elm-document.querySelector("body"); 
elm.style.background-" Z00F"; } 
</script> 
</body> 
</html> 


6.3.7 querySelectorAll 方法 
querySelectorAll 根据 指定 的 选择 表达 式 ， 返 回 页 面 中 所 有 匹配 的 元 素 。 如 采 没 有 匹配 的 
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元 系 则 返回 null. KERAK AHE S A SIT CSS3 WEAH 
语法 : 


var elementList = document.querySelectorAll(selectors) 


与 querySelector 方法 相同 ，querySelectorAll 的 参数 须 是 符合 CSS Selector 的 字符 串 。 不 
同 的 是 querySelector 返回 的 是 一 个 对 象 ，querySelectorAll 返回 的 是 一 个 集合 。 
如 果 要 使 用 querySelectorAll 获取 某 个 特定 元 素 ， 可 以 通过 下 面 的 语句 完成 : 


var elelist = document.querySelectorAll("selectors ")[n]; 


例如 ， 要 使 用 querySelectorAIl 获得 id 值 为 divl WETIRE A, HI EGRE PRIUS 
AJTE: 


var elelist = document.query SelectorAll("div div.red'™ [0]; 
WRES id 值 为 divl 的 所 有 子 元 素 节 点 ， 可 以 通过 下 和 面 的 语句 完成 : 
var elelist = document.querySelectorAIl("div div.red"); 


iie dise SE TH 6-5. 


代码 清单 6-5: 完整 代码 
<!DOCTYPE HTML> 
<html> 
<head> 
<style type="text/css"> 
.red { color: Red; } 
.blue { color: Blue; } 
</style> 
<script type="text/javascript"> 
function addBorder1() | 
var elelist = document.querySelectorAll("div div.red")[0 ]; 
elelist.style.border-" 1 px dashed pink"; } 
function addBorder2()1 
var elelist = document.querySelectorAIl("div div.red"); 
for(var 1 = 0; icelelist.length; i++) 1 elelist[1].style.border-" 1px dashed pink"; } 
j 
</script> 
</head> 
<body> 
«div id="div1" class="red"> F 
«div class="red"> 北 京 </div> 
«div class="blue"> 天 津 </div> 
«div class="red"> 上 海 </div> 
«div class="blue"> 重 庆 </div> 
</div> 
<input type="button" name="btn1" value="addBorder1" onclick="addBorder10"/> 
<input type="button" name="btn2" value="addBorder2" onclick="addBorder2()"/> 
</body> 
</html> 
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第 7 章 使 用 HTML5 SVG 


SVG 指 可 伸缩 矢量 图 形 (Scalable Vector Graphics) ， 它 使 用 XML 格式 定义 用 于 网 络 的 基 
于 矢量 的 图 形 。SVG 图 像 在 放大 或 改变 尺寸 的 情况 下 ， 图 形 质量 不 会 有 上 所 损失 。 

HTMLS 允许 使 用 <svg>.….</svg> 直 接 峙 入 SVG, SVG 代码 以 <svg> 元 素 开 始 ， 包 括 开启 
标签 <svg> 和 关闭 标签 </svg>。width 和 height 属性 可 设置 此 SVG LA SR EIE. version 
属性 可 定义 所 使 用 的 SVG 版 本 ，xmlns 属性 可 定义 SVG 命名 空间 。 

例如 : 


<svg width="100%" height="100%" version-" 1.1"xmlns-"http://www.w3.org/2000/svg"»...... </sve> 


| 7.4 SVG 形状 


7.1.1 SVG 圆 形 


SVG 的 <circle> 用 来 创建 一 个 圆 。 
语法 : 











LM 


«circle i 


cx 和 cy 属性 定义 圆心 的 x 和 y 坐标 。 如 条 忽略 这 两 个 属性 ， 那 么 圆心 会 被 设置 为 (0， 
0) 。T 属性 定义 圆 的 半径 。 

此 外 ， 可 以 使 用 stroke 和 stroke-width 属性 控制 如 何 显示 形状 的 轮廓 ， 使 用 fll 属性 设置 
形状 内 的 颜色 。 


cx-" " Cy=" "gs" "O [^ 








代码 清单 7-1: 绘制 SVG AR 
«svg id-"svgelem" height-"200" xmlns-"http://www.w3.org/2000/svg" 
«circle id-"redcircle" cx-"50" cy-"50" r="50" fill="red" /> 


</svg> 


7.1.2 SVG 证 形 


HTML5 nJ DA f H] «rect ir ERA EEE UREE HAE TE 
语法 : 

<rect id=" "y=" y=" "ry="" ry=" " width=" " height-" M onm /> 

rect 标签 定义 窍 形 所 包含 的 属性 如 下 : 

(C1) width 和 height 属性 可 定义 窍 形 的 高 度 和 宽度 。 
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(20 x 属性 定义 拖 形 的 左 侧 位置 〈 例 如 ，x="0" 定 义 和 矩形 到 浏览 器 窗口 左 侧 的 距离 是 
Opx2. 

G) y h&TEXE XCROE I) DU br EL CJ, y="0" E X XROE 8] 70] V L1 Toi Yi HS EE A 7E 
Opx2. 

(4) rx 和 ry JS TE n EREJE T" ^E EL ff e 

EX — T NUBE. AIA P: 

«svg id-"svgelem" height-"200" xmlns-"http://www.w3.org/2000/svg" 


«rect id-"redrect" width-"300" height-" 100" fill="red" /> 
</svg> 


此 外 ，rect 标签 还 可 以 使 用 CSS 属性 ， 以 实现 一 些 特殊 效果 。 下 和 面 的 代码 用 于 实现 透明 
HU ER FS EE 

«svg width-" 10096" height-" 10092" version-"1.1"xmlns-"http://www.w3.org/2000/svg" 

«rect x-"20" y="20" rx-"20" ry="20" width-"250" height-" 100" 


style-"fill:red;stroke:black;stroke-width:5;opacity:0. 1"/7 
</svg> 


CSS 的 opacity 属性 定义 整个 元 系 的 透明 值 AAWE: 0 一 1)。 
7.1.3 SVG $l] 


«ellipse-4i 5 nf HREJE. MAS RAA, ALAE TER ERPE AIS FSTER x I y 半 
径 ， 而 圆 的 x 和 y 半径 是 相同 的 。 

定义 SVG 椭圆 的 代码 如 下 : 

<svg 1d="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> 


<ellipse cx="100" cy="50" rx="100" ry-"50" fill="red" /> 
</svg> 


代码 说 明 : 

(1) cx 属性 定义 圆心 的 x 坐标。 
(2) cy 属性 定义 圆心 的 y 坐标 。 
(3) rx 属性 定义 水 平 半径 。 
(4) ry 属性 定义 垂直 半径 。 























一 一 一 





一 一 一 


7.1.4 SVG 线条 


<line> 标 签 用 来 创建 线条 。 线 条 不 同 于 路 径 ， 它 是 坐标 系 中 两 个 坐标 点 的 连 线 。 可 以 通 
xt Pm sg SX SVG 线条 
«svg id-"svgelem" height-"200" xmlns-"http://www.w3.org/2000/svg" 
«line x12"0" y1—"0" x2="200" y2-"100" style-"stroke:red;stroke-width:2"/7 
</svg> 
代码 说 明 : 
(1) x1 属性 在 x 轴 定义 线条 的 开始 。 
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(2) yl 属性 在 y 轴 定 义 线条 的 开始 。 
(3) x2 属性 在 x 轴 定义 线条 的 结束 。 
(4) y2 属性 在 y 轴 定 义 线条 的 结 


7.1.5 SVG 多边形 


<polygon> 标 签 用 来 创建 含有 不 少 于 三 个 边 的 网 形 。<polygon> 标 签 使 用 points 属性 定义 
多 边 形 每 个 角 的 x 和 y 坐标 。 可 以 通过 下 面 的 代码 定义 SVG 多 边 形 : 
<svg 1d="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> 


«polygon  points-"20,10 300,20, 170,50" fill="red" /> 
</svg> 





7.1.6 SVG 折线 


<polyline> 标 签 用 来 创建 仪 包含 百 线 的 形状 。<polygon> 标 签 使 用 points 属性 定义 多 边 形 
每 个 角 的 x 和 y 坐标 。 可 以 通过 下 面 的 代码 定义 SVG 折线 : 
«svg id-"svgelem" height-"200" xmlns-"http://www.w3.org/2000/svg" 
«polyline points-"0,0 0,20 20,20 20,40 40,40 40,60" style-"fill:white;stroke:red;stroke-width:3" /> 


</svg> 


7.1.7 SVG 路 径 

<path> 标 签 用 来 定义 路 径 。 下 面 的 命令 可 用 于 路 径 数据 : 

M = moveto, L = lineto. H = horizontal lineto. V = vertical lineto. C = curveto. S = 
smooth curveto, Q = quadratic Belzier curve, T = smooth quadratic Belzier curveto、 A = 


elliptical Arc. Z = closepath. 
注意 : 以 上 所 有 命令 均 允 许 小 写 字母 。 大 写 表 示 绝 对 定位 ， 小 写 表 示 相 对 定位 。 
下 面 的 代码 实现 了 一 个 三 角形 路 径 。 
«svg width="100%" height-" 10099" version-" 1. 1"xmlIns-"http://www.w3.org/2000/svg" 


«path d="M250 150 L150 350 L350 350 Z" /> 
</svg> 


上 面 的 例子 定义 了 一 条 路 径 ， 它 开始 于 位 置 (250，150)， 到 达 位 置 是 (150, 3500, AA 
后 从 那里 开始 到 (3$0，350)， 最 后 在 (250, 1500 关闭 路 径 。 


7.2 SVG 渐变 


渐变 是 从 一 种 颜色 到 另 一 种 颜色 的 平滑 过 渡 。 另 外 ， 可 以 把 多 个 颜色 的 过 渡 应 用 到 同一 
个 元 素 上 。 与 SVG 滤 镜 相同 ，SVG 渐变 也 在 <def> 标 签 中 进行 定义 。 在 SVG 中 ， 有 两 种 主 
要 的 渐变 类 型 : 线性 渐变 和 放射 性 渐变 。 
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7.2.1 ”线性 渐变 
HTML5 SVG 线性 渐变 可 以 使 用 <linearGradien 他 标签 定义 。 线 性 渐变 可 被 定义 为 水 平 、 
垂直 或 角形 的 渐变 。 


代码 清单 7-2: 实现 SVG 线性 渐变 
«svg width="100%" height="100%" version="1.1" xmlns="http:/www.w3.org/2000/svg"> 
<defs> 
<linearGradient id="orange_red" x1="0%" y 1="0%" x2="100%" y2="0%"> 
«stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/> 
«stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/> 
</linearGradient> 
</defs> 
«rect id="redrect" width="200" height="100" style-"fill:url(Zorange red)"/ /> 
</svg> 


代码 分 析 : 

(1) <linearGradien 亿 标签 的 id 属性 可 为 渐变 定义 一 个 唯一 的 名 称 。 

(2) fill:url(#orange red) 属性 通过 “#” 字 符 将 rect 元 素 与 渐变 进行 关联 。 

(3) <linearGradient> 标 签 的 x1、x2、yl、y2 属性 可 定义 潮 变 的 开始 和 结束 位 置 。 当 yl 
和 y2 相等 、 而 xl 和 x2 不 同时 ， 可 创建 水 平 渐变 当 xl 和 x2 相等 、 而 yl 和 y2 不 同时 ， 
可 创建 垂直 渐变 ， 当 xl 和 x2 不 同 、 且 yl 和 y2 不 同时 ， 可 创建 角形 渐变 。 

(4) 渐变 的 颜色 范围 可 由 两 种 或 多 种 颜色 组 成 。 每 种 颜色 通过 一 个 <stop> 标 签 来 规定 。 
offset 属性 用 来 定义 渐变 的 开始 和 结束 位 置 。 

(5) CSS 的 stroke-opacity 属性 定义 笔触 颜色 的 透明 度 〈 有 效 范 围 是 : 0 一 1 )。 


7.2.2 ”放射 性 渐变 


放射 性 渐变 的 创建 方法 与 线性 渐变 基本 相同 ， 可 以 使 用 <radialGradient> 来 定义 放射 性 渐 
变 ， 同 样 ，<radialGradient> 标 签 必须 藤 套 在 <defs> 中 。 

















代码 清单 7-3: 实现 SVG 放射 性 渐变 
«svg width="100%" height="100%" version-" 1.1" xmlns="http://www.w3.org/2000/svg"> 
<defs> 
«radialGradient id="yellow_red" cx="60%" cy="60%" r="60%" fx="50%" fy="50%"> 
«stop offset="0%" style="stop-color:yellow; stop-opacity:0.4"/> 
«stop offset="100%" style="stop-color:red; stop-opacity:1"/> 
</radialGradient> 
</defs> 
«circle id="redcircle" cx="50" cy="50" r="50" style-"fill:url(£yellow red)" /> 
</svg> 


代码 分 析 : 
放射 性 渐变 与 线性 渐变 创建 的 方法 基本 相同 ， 这 里 不 做 过 多 解释 。 需 要 说 明 的 是 ， 
radialGradient 标签 的 cx, cy AI 属性 用 于 定义 渐变 的 外 疾 ， 而 fx 和 fy 用 于 定义 渐变 的 内 
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背 。 渐 变 的 凑 色 范围 可 由 两 种 或 多 种 颜色 组 成 。 


| 7.3 SVG 滤 镜 


Poia 用 来 定义 SVG Wi. CEH id BEREX RENAA. filters 
ACE E«defsP ENSE A. BET SVG 元 系 上 可 使 用 多 个 滤 镜 。 
y^ SVG d, uJHIBISSER: 
feBlend. feColorMatrix. feComponentTransfer. feComposite. feConvolveMatrix. feDif- 
fuseLighting ~ feDisplacementMap ~ feFlood feGaussianBlur,. felmage. feMerge. feMor- 
phology, feOffset. feSpecularLighting. feTile. feTurbulence. feDistantLight. fePointLight. 
feSpotLight. 











代码 清单 7-4: 实现 SVG 高 斯 模糊 
«svg width="100%" height-" 10095" version-" 1.1" xmlns="http://www.w3.org/2000/svg"> 
«defs^ 
«filter id-"Gaussian Blur" 
«feGaussianBlur in-"SourceGraphic" stdDeviation-"3" /> 
«filter 
</defs> 
«ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000; 
stroke-width:2;filter:url(#Gaussian_Blur)"/> 


</svg> 





代码 在 Opera 浏览 器 中 的 显示 效果 如 图 7-1 所 示 。 

ANTA] T: 

(1) «filter» b S] id 属性 可 为 滤 镜 定义 一 个 唯一 的 名 称 《〈 同 
一 滤 镜 可 被 文档 中 的 多 个 元 素 使 用 )。 

(2) filterurl. 属性 用 来 把 元 系 链 接 到 滤 锁 。 当 链接 小 锐 id 





HT, 必须 使 用 “ FÍT o 图 7-1 高 斯 模糊 效果 
(3) 小 镜 效果 是 通过 <feGaussianBlur> 标 签 进 行 定 义 的 ，fe 前 
级 可 用 于 所 有 的 小 饶 。 


(4) <feGaussianBlur> 标 签 的 stdDeviation 属性 可 定义 模糊 的 程度 。 
(5) in="SourceGraphic" 定 义 了 由 整个 图 像 创 建 效果 。 
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在 HTMLS 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传 递 的 ， 而 是 只 有 在 请 求 时 使 用 数据 。 它 使 
得 在 不 影响 网 站 性 能 的 情况 下 存储 大 量 数据 成 为 可 能 。 对 于 不 同 的 网 站 ， 数 据 存 储 于 不 同 的 
区 域 ， 并 且 一 个 网 站 只 能 访问 其 目 映 的 数据 。 


| 8.1 认识 Web Storage 


Web Storage API 定义 了 一 个 标准 ， 束 是 如 何在 本 地 用 户 的 计算 机 或 设备 上 存储 简单 的 数 
Hio Æ Web Storage 标准 出 现 之 前 ， 网 页 开发 者 通常 使 用 Cookie 或 者 插件 来 完成 用 户 信 息 的 
Tifo BAFRA — HEH Cookie 进行 用 户 信 息 的 存储 ， 但 是 它 的 号 点 也 很 明显 。 

(1) 每 一 次 Http 请 求 都 会 发 送 Cookie 信息 ，Cookie 就 会 在 服务 器 与 浏览 器 之 间 来 回 传 
送 ， 这 就 曹 味 看 Cookie 数据 消耗 了 一 定 的 帝 宽 。 此 外 ， 在 网 络 中 Http 发 送 的 Cookie 都 是 不 
加 密 的 (除非 整个 Web 应 用 均 是 基于 SSL 的 )， 这 些 不 加 密 的 数据 存在 看 一 定 的 风险 。 

(2) Cookie 不 适合 大 量 数据 的 存储 ， 一 般 来 说 ， 一 个 Cookie 只 能 设置 大 约 4KB 的 数 
据 ， 这 就 意味 看 它 不 能 接受 像 视 频 或 音频 那样 的 大 数据 。 

用 户 真 正 需 要 的 是 能 够 在 客户 喘 持久 化 地 存储 大 量 数据 ， 并 且 存 储 数 据 不 会 每 次 都 传输 
给 服务 器 。 

Web Storage 能 够 很 好 地 解决 上 述 问题 。Web Storage 束 是 能 以 键 值 对 的 形式 安全 地 存储 
和 获取 数据 的 方法 ， 目 的 是 使 Web 应 用 程序 可 以 提供 更 多 高 级 交互 的 功能 ， 与 Cookie 相 比 
它 有 以 下 优势 : 

CD 存储 内 容 不 会 被 发 送 到 服务 器 : 即 Web Storage 中 的 数据 仪 保存 在 本 地 ， 不 会 与 服 
务 器 发 生 任何 交互 。 

(20 FATAR: 人 至少 提 供 5MB 的 存储 空间 。 

(30 独立 的 存储 空间 : 每 个 域 〈 包 括 子 域 ) 有 独立 的 存储 空间 ， 各 个 存储 空间 是 完全 独 
并 的 ， 因 此 不 会 造成 数据 混乱 。 

(4) Web Storage 提供 了 一 僚 更 为 丰富 的 接口 ， 使 得 数据 操作 更 为 从 便 。 


| 8.2 Web Storage 组 成 


HTMLS Web Storage 由 两 部 分 组 成 : localStorage 与 sessionStorage. 

sessionStorage 用 于 在 本 地 存储 一 个 会 话 〈session) 中 的 数据 ， 这 些 数 据 只 有 在 同一 个 会 
话 中 的 页 面 才 能 访问 ， 并 且 当 会 话 结束 后 数据 也 随 之 销毁 。 因 此 sessionStorage 不 是 一 种 持 
和 久 化 的 本 地 存储 ， 而 仅 是 会 话 级 别 的 存储 。 只 要 网 页 是 同 源 的 ， 基 于 相同 的 键 都 能 够 在 其 他 
的 网 页 中 获取 或 设置 sessionStorage 数据 。 
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localStorage 用 于 持久 化 的 本 地 存储 ， 除 非 主动 删除 数据 ， 否 则 数据 是 永远 不 会 过 期 的 。 
也 就 是 说 ， 在 不 主动 删除 的 情况 下 ，localStorage 方法 存储 的 数据 没有 时 间 限 制 ， 第 二 天 、 第 
二 周 或 一 年 之 后 ， 数 据 依然 可 用 。 
sessionStorage 与 localStorage 的 区 别 如 表 8-1 所 示 。 


表 8-1 sessionStorage 5 localStorage 的 区 别 








数据 保存 到 存储 它 的 窗口 或 标签 页 关闭 时 
数据 只 在 构建 它 的 窗口 或 标签 内 可 见 


mum 数据 的 生命 周期 比 窗口 或 浏览 器 的 生命 周期 长 。 除 非 主动 而 除数 据 ， 和 否则 数据 
localStorage iki 是 永远 不 会 过 期 的 
数据 在 同 源 的 每 个 窗口 或 标签 可 见 ， 即 数据 可 被 同 源 的 每 个 窗口 或 标签 页 


| 8.3 Web Storage API 


8.3.1 ”检测 浏 贤 绒 支持 性 


全 局 window 对 象 可 以 访问 特定 域 上 的 storage 数据 库 。 当 window.localStorage 或 
window.sessionStorage 可 访问 时 ， 则 表明 浏览 融 文 持 ， 人 否则 表明 浏览 喜 不 文 持 。 








sessionStorag 
可 见 性 











代码 清单 8-1: 使 用 全 局 window 对 象 进 行 storage 的 浏览 器 支持 检测 
«script type="text/javascript"> 
function checkStorageSupport(){ 
if(window.sessionStorage){ 
document.getElementById("checkResult").innerHTML-"OK,This browser is Support 
sesssionStorage!"; 
lelse1 
document.getElementById("checkResult").innerHTML-"Sorry,This browser is not 
Support 
sesssionStorage!"; } 
if(window.localStorage) 
document.getElementById("checkResult").innerHTML-"OK,This browser is Support 
localStorage!"; 
velse 1 
document.getElementById("checkResult").innerHTML-"Sorry,This browser is not 
Support localStorage!"; } 


j 
</script> 


除了 使 用 上 述 方法 外 ， 开 发 人 员 还 可 以 使 用 Modernizr. PESE Jj 28S: 00] 10] 9. x 1 
fF HTML5 Web Storage: 


if(Modernizr.localstorage) 
alert("OK,This browser is Support localStorage!"); 
}else{ alert("Sorry,This browser is not Support localStorage!"); } 


67 


HTML5, CSS3, JavaScript 开发 手册 


if(Modernizr.sessionstorage){ 
alert("OK,This browser is Support sessionStorage!"); 
}else{ alert("Sorry,This browser is not Support sessionStorage!"); } 


8.3.2 ”存储 和 的 取 数 据 


HTMLS 提供 了 两 种 在 客户 兽 存 储 数 据 的 新 方法 。 

在 HTMLS 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传 递 的 ， 而 是 只 有 在 请 求 时 才 使 用 数据 。 这 
残 使 在 不 影 啊 网 站 性 能 的 情况 下 存储 大 量 数据 成 为 可 能 。 

(12 localStorage: 没有 时 间 限 制 的 数据 存储 。 

(2) sessionStorage: 针对 一 个 session 的 数据 存储 。 

localStorage 和 sessionStorage 除了 名 字 和 生命 周期 外 ， 其 他 功能 完全 相同 ， 且 均 实 现 了 
Storage 接口 。Storage 接口 描述 如 下 : 














interface Storage 1 
readonly attribute unsigned long length; 
getter DOMString key(in unsigned long index); 
getter any getItem(in DOMString key); 
setter creator void setItem(in DOMString key, in any data); 
deleter void removeIltem(in DOMString key); 
void clear(); 
n 
当 创 建 一 个 localStorage 或 sessionStorage 对 象 时 ， 束 创建 了 一 个 Storage 对 象 。 同 时 这 
些 键 值 对 会 被 天 联 起 来 ， 因 此 就 可 以 使 用 这 些 数据 。 
(I) length: 表示 目前 Storage 对 象 中 存储 的 键 值 对 的 数量 。 
(2) key: 允许 获取 一 个 指定 位 置 的 键 。 
(3) getltem: 根据 指定 的 键 返 回 相应 的 数据 。 如 来 传 入 的 键 名 不 存在 ， 则 返回 null. 
(4) setItem: 将 数据 存 入 指定 键 对 应 的 位 置 。 如 果 指 定 的 键 名 已 经 存在 ， 那 么 新 传 入 的 
Ais m PER IUDA T e 
(5) removeltem: 删除 数据 项 。 如 果 数 据 存储 在 键 参数 下 ， 则 调用 removeltem (key) 7 
法 将 相应 的 数据 项 删除 ， 售 则 不 执行 任何 操作 。 
(6) clear: 用 于 删除 存储 列表 中 的 所 有 数据 。 
下 面 以 localStorage 为 例 ， 说 明 如 何 存储 和 获取 数据 。 
设置 数据 非 解 简单， 只 需要 执行 以 下 语句 即 可 : 


"om 


localStorage.setItem("storageK ey", "storageValue"); 
获取 数据 需要 调用 getItem 函数 ， 例 如 : 
var val-localStorage.getItem("storageK ey"); 


此 外 ， 还 可 以 使 用 expando 属性 设置 和 获取 数据 。 这 样 可 以 根据 键 值 对 应 的 关系 ， 下 接 
在 localStorage 对 和 象 上 设置 和 获取 数据 。 设 置 数 据 代 公 如 下 : 
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localStorage.storageKey-"storage Value"; 
获取 数据 代码 如 下 : 
var val-localStorage.storageK ey; 


在 茶 坚 浏览 器 中 的 存储 也 可 以 被 视 为 一 个 市 索引 的 数据 字典 《或 JavaScript 数组 )， 代 码 
al P: 


localStorage["key"] = "stroageValue"; 
var val = localStorage|["storageK ey" |; 


为 了 让 谈 者 更 好 地 理解 Storage 接口 ， 下 面 对 setltem(key,value). removeltem(key) . 
getItem(key)、clear()、key(index) 进 行 测 试 。 


代码 清单 8-2: localStorage 实现 Storage 接口 功能 
<IDOCTYPE HIML> 
<html> 
<head> 


«script type-"text/Javascript" src-' 


"S 


jquery-1.6.4.js" «/script^ 
«script type-"text/jJavascript" 
function $(1d){ return document.getElementBylId(1d); ! 
function setItem()( 
var k = $('key1").value, 
v = $('value).value; 
localStorage.setItem(k,v); } 
function getItem() 
var k = $('key2").value; 
alert("The value 1s:'-HocalStorage.getItem(k)); } 
function getKey() | alert('The first key is: ' + localStorage.key(0)); } 
function getLength() ( alert('The localStorage length is: ' + localStorage.length); } 
function removelItem()( 
var k = $('key3").value; 
localStorage.removeltem(k); } 
function executeClear() 1 localStorage.clear(); } 
</script> 
</head> 
<body> 
<fieldset style="width:300px" > 
<legend>setltem</legend> 
«table style="font-size:small" > 
<tr> 
«td» 5 (Key) :</td> 
<td><input id="key 1 "></td></tr> 
<tr> 
<td> 值 (Value) :</td> 
<td><input id="value"></td></tr> 
</table> 
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«button onclick-"setItem()" id="bt1">setItem</button> 
«/fieldset^ 
«fieldset style-"width:300px"» 
-]egend»getItem«/legend^ 
«table style-"font-size:small" > 
<tr> 
<td> 键 (Key) :</td> 
<td><input id="key2"></td> 
<td><button onclick="getltem()">getltem</button></td></tr> 
</table> 
</fieldset> 
<fieldset style-"width:300px" > 
<legend>removeltem</legend> 
«table style="font-size:small" > 
«tr 
<td> (Key) :</td> 
<td><input id="key3"></td> 
<td><button onclick="removeltem()">removeltem</button></td></tr> 
</table> 
</fieldset> 
«button onclick="getKey()">first key</button> 
«button onclick="getLength()">length</button> 
«button onclick="executeClear()">clear</button> 
</body> 
</html> 





程序 在 Opera 浏览 右 中 的 显示 效果 如 图 8-1 所 示 。 


| 


removeltem 





图 8-1 localStorage 实现 Storage 接口 功能 


代码 分 析 : 

本 程序 通过 localStorage 实现 Storage 接口 功能 ， 分 析 如 下 : 

(1) setItem 栏 包含 两 个 输入 值 ， 一 个 是 键 ， 一 个 是 键 所 对 应 的 值 。 当 单 击 “setItem” 按 
钮 时 ， 键 与 其 所 对 应 的 值 〈 键 - 值 对 ) 将 被 存储 到 本 地 浏览 器 中 。 如 果 键 已 经 存在 ， 则 替换 
原 值 。 例 如 ， 第 一 次 输入 键 名 为 1; 值 为 111; 第 二 次 输入 键 名 为 1; 值 为 2222; We fH 
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“1111” RER. 

(2) getltem 柱 用 于 获取 所 存储 的 数据 。 当 输入 指定 的 键 名 后 ， 将 返回 相应 的 数据 。 如 
果 传 入 的 键 名 不 存在 ， 则 返回 nul。 人 例如， 输入 键 名 为 1， 则 返回 该 键 所 对 应 的 值 为 
2 

(3) removeltem 柱 用 于 删除 指定 数据 项 。 如 果 数 据 存 储 在 键 参 数 下 ， 则 调用 
removeltem (key) 方法 将 相应 的 数据 项 删除 ， 人 个 则 不 执行 任何 操作 。 

(4) "first key” 按 钮 用 于 获得 Storage 对 象 中 存储 的 第 一 个 数据 项 的 键 名 称 。 

(5)“length” 按 钮 用 于 获得 目前 Storage 对 象 中 存储 的 键 值 对 的 数量 。 

(6)“clear” 按 钮 用 于 删除 存储 列表 中 的 所 有 数据 。 


8.3.3 ”转换 存储 数据 


Web Storage 和 存储 的 数据 均 以 字符 串 的 形式 存在 ， 所 以 如 果 想 使 用 这 些 数据 (如 数值 或 
对 象 )， 束 需要 对 其 进行 数据 转换 。 可 以 使 用 JavaScript 的 parseInt 方法 ， 代 但 如 下 : 


var val = parseInt(localStorage.getItem("storageK ey")); 














8.3.4 Storage 事件 


调用 setitem 0 . removeItem O 或 者 clear O 会 导致 存储 发 生 改变 ， 这 时 会 触发 storage 5 
件 。 但 是 如 果 设 置 一 个 已 存在 的 值 ， 或 者 在 一 个 空 的 存储 区 域 调 用 clear. US 
storage 事件 ， 这 个 事件 不 会 上 骨 泡 也 不 可 以 被 阻止 。StorageEvent 接口 对 象 如 下 : 


interface StorageEvent : Event 1 

readonly attribute DOMString key; // 发 生 改变 的 键 

readonly attribute DOMString oldValue; // 键 改变 之 前 的 值 

readonly attribute DOMString newValue; // 键 改变 之 后 的 值 

readonly attribute DOMString url; /触发 存储 事件 的 页 面 url 

readonly attribute Storage storageArea; // 指 问 值 发 生变 化 的 localStorage 或 sessionStorage， 返 回 受 
影响 的 Storage XJ 

void initStorageEvent(DOMString typeArg, boolean canBubbleArg, boolean cancelableArg, DOMString 
keyArg, DOMString oldValueArg, DOMString newValueArg, DOMString urlArg, Storage storage 
AreaArg); 

/负责 事件 初始 化 
J; 


无 论 监听 窗口 是 否 存储 数据 ， 只 要 用 户 在 同一 地 点 ， 即 使 在 不 同 的 标签 中 打开 ， 此 事件 
仍 可 用 于 同步 数据 。 如 图 8-2 Bp. 

















代码 清单 8-3: 通过 storage 事件 对 代码 8-2 窗口 进行 监听 
<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/Javascript"> 
function handleStorageEvent(e) { 


var incomingRow = document.createElement('div); 
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document.getElementBylId("container").appendChild(incomingRow); 
var visit logged = "key:" + e.key + ", newValue:" + e.newValue + ", oldValue:" + e.old 
Value + 
", url:" + e.url + ", storageArea:" + e.storageArea; 
incomingRow.innerHTML - visit logged; 
j 
if (window.addEventListener) { 
window.addEventListener("storage", handleStorageEvent, false); 
t else {  window.attachEvent("onstorage", handleStorageEvent); // for IE versions below IE9 ); 
</script> 
</head> 
<body> 
«div id="container"></div> 
</body> 
</html> 





图 8-2 storage 事件 监听 


| 8.4 存储 限制 


HTMLS 规范 中 建议 浏览 句 允 许 每 组 同 源 页 面 使 用 SMB 的 至 间 ， 如 采 存 储 已 到 达 其 最 大 
容量 或 者 用 户 关 闭 了 网 站 的 存储 ， 那 么 此 时 设置 数据 将 会 执 出 QUOTA_EXCEEDED ERR fi 
误 。 下 面 的 代码 是 癌 Chrome 中 存储 大 量 的 数据 ， 从 而 抛 出 异常 ， 如 图 8-3 Pr. 

















<script type="text/javascript"y 
for(var i-0;i«1800800000;i«4) 
i 


 localStorage.setlItem(i,"HTML5"); m 


"gg Uncaught Error: QUOTA EXCEEDED ERR: DOM Exception 22 





| 器 | yz ZA] e | *top frame» 3| €» Errors Warnings Loge 


图 8-3 Chrome J//itH QUOTA EXCEEDED ERR 异常 
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«script type-"text/javascript" 
for(var 1=0;1<100000000;1++){ localStorage.setItem(1,"HTML5^"); j 
</script> 


因此 ， 在 需要 设置 存储 数据 的 时 候 ， 要 保证 应 用 程序 能 够 处 理 此 类 寞 常 。 





代码 清单 8-4: QUOTA EXCEEDED ERR 异常 处 理 方法 
«script type="text/Javascript"> 
try{ 
for(var i=0;i1<100000000;i++){ 
localStorage.setltem(i1," HTMLS"); } 
tcatch(e){ 
if((e.name).toUpperCase()=='QUOTA EXCEEDED ERR')! 
alert('Quota exceeded!);  j 


j 
</script> 


| 8.5 ”使 用 JSON 处 理 数 据 


8.5.1 认识 JSON 


JSON (JavaScript Object Notation, JavaScript 对 象 表示 法 ) 是 存储 和 交换 文本 信息 的 语 
法 ， 类 似 于 XML， 但 比 XML 更 小 、 更 快 、 更 易 解析 。JSON 文本 格式 在 语法 上 与 创建 
JavaScript 对 象 的 代码 相 同 。 由 于 这 种 相似 性 ， 无 需 解析 器 ，JavaScript 程序 就 能 够 使 用 内 建 
的 eval() KZG H JSON 数据 来 生成 原生 的 JavaScript 对 象 。JSON 特点 如 下 : 

(1) JSON 是 轻 量 级 的 文本 数据 交换 格式 。 

(2) JSON 独立 于 语言 。 

(3) JSON 具有 上 自我 插 述 性 ， 更 易 理 解 。 

JSON 使 用 JavaScript 语法 来 描述 数据 对 象 ， 但 是 仍然 独立 于 语言 和 平 侣 。JSON 解析 天 
和 JSON 库 文 持 多 种 编程 语言 。 

1. JSON 语法 

JSON 语法 是 JavaScript 对 象 表示 法 语法 的 子 集 。 

(1) 数据 在 名 称 / 值 对 中 。 

JSON 数据 的 书写 格式 是 : 名 称 / 值 对 。 名 称 / 值 对 包括 字段 名 称 〈 在 双 引 号 中 )， 后 面 与 

ANB. HB. FIOI: 


"myName" : " Kate" 
这 很 容易 理解 ， 等 价 于 下 面 的 JavaScript 语句 : 
myName - " Kate " 


JSON 的 值 可 以 是 数字 《整数 或 浮 点 数 )、 字 人 符 串 《〈 在 双 引 号 中 )、 志 辑 值 〈true 或 
false)、 数 组 〈 在 方 括号 中 )、 对 象 〈 在 花 括 号 中 )、null。 
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(20 ERSTA, BD. 
JSON 对 象 可 以 包含 多 个 名 称 / 值 对 ， 在 花 括 号 中 书写 : 
{ "myName":"Kate" , " yourName":" Lisa" | 


这 一 点 也 容易 理解 ， 与 下 面 的 JavaScript 语句 等 价 : 


myName - "Kate" 


yourName - "Lisa" 


(3) Jrdh 5 DREAM. 
JSON 数组 可 包含 多 个 对 象 ， 数 组 在 方 括号 中 书写 : 


"name": [ 
{ "myName":"Kate" , "yourName":"Lisa" j, 
{ "myName":"Bill" , "yourName":;"Rose" }, 


{ "myName":"Peter" , "yourName":"White" } | 
j 


2. JSON 使 用 JavaScript 语法 
JSON 使 用 JavaScript 语法 ， 所 以 无 需 额 外 的 软件 驶 能 处 理 JavaScript 中 的 JSON。 通 过 
JavaScript 可 以 创建 一 个 对 象 数 组 ， 并 像 这 样 进行 赋值 : 
var name- [ 
{ "myName":" Kate" , "yourName":"Lisa" }, 
{ "myName":"Bill" , "yourName":" Rose" }, 
{ "myName":"Peter" , "yourName":"White" | 
]; 
可 以 像 下 面 这 样 访 问 JavaScript 对 象 数 组 中 的 任何 一 项 数据 : 


name[0].yourName; 








返回 的 内 容 古 : 
Lisa 





此 外 ， 可 以 像 下 面 这 样 修改 对 象 数组 中 的 任何 一 项 数据 : 

name[1].yourName = "Tom"; 

3. JSON 的 使 用 

JSON 最 沼 见 的 用 法 是 从 Web 服务 需 上 旋 取 JSON 数据 《〈 作 为 文件 或 HttpRequest)， 将 
JSON 数据 转换 为 JavaScript 对 象 ， 然 后 在 网 页 中 使 用 该 数据 。 

创建 包含 JSON 语法 的 JavaScript 字符 串 : 








var txt = '{"name":[' + 
'{"myName":"Kate","yourName":"Lisa" },' + 
's"myName":"Bill","yourName":"Rose" },' + 


'{"myName":"Peter","yourName":"White" }]y'; 
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由 于 JSON 语法 是 JavaScript 语法 的 子 集 ， 因 此 JavaScript 函数 evalO0 可 用 于 将 JSON X: 
本 转换 为 JavaScript 对 象 。 

eval( PR Zi H1] Ie JavaScript 编译 器 ， 可 解析 JSON 文本 ， 然 后 生成 JavaScript 对 象 。 
必须 把 文本 包含 在 括 写 中 ， 这 样 才能 避免 语法 歧义 : 

var obj = eval ("(" + txt + ")"); 

生成 JavaScript X} Jr, PJ ME A gus ev; n THO 2G: 


obj.name[1].yourName 





代码 清单 8-5: 在 网 页 中 使 用 JavaScript: 对 象 
<body> 
<p> myName is <span id="myName"></span><br /> 
yourName is <span id="yourName"></span><br /></p> 
<script type-"text/Javascript" 
var txt = '{"name":[' + '{"myName":"Kate","yourName":"Lisa" },' + 
'{"myName":"Bill","yourName":"Rose" },' + 
'{"myName":"Peter","yourName":"White" }]}'; 
var obj = eval ("(" + txt + ")'); 
document.getElementById("myName").innerHTML-obj.name|[1 |[.:my Name 
document.getElementById("yourName").innerHTML-obj.name| 1 ].yourName 
</script> 
</body> 


eval 函数 非常 快速 。 它 可 以 编译 执行 任何 JavaScript 程序 ， 因 此 产生 了 安全 性 问题 。 只 
有 使 用 可 信任 与 完善 的 源 代 但 时 才 可 以 使 用 eval 函数 。 这 样 可 以 更 安全 地 使 用 JSON 解析 
fro IER XMLHttpRequest 的 Web 应 用 ， 页 面 之 间 的 通信 只 允许 同 源 ， 因 此 是 可 以 信任 
的 ， 但 不 是 完善 的 。 如 果 服 务 器 没有 严谨 的 JSON 编 权 ， 或 者 没有 严格 的 输入 验证 ， 那 么 可 
能 传送 包括 危险 脚本 的 无 效 JSON 文本 ，eval 函数 将 执行 恶意 的 脚本 。 

使 用 JSON 解析 器 可 以 防止 此 类 事件 。JSON 解析 器 只 能 辨识 JSON 文本 ， 拒 绝 其 他 所 
有 脚本 。 因 此 提供 了 本 地 JSON 支持 的 浏览 器 的 JSON 解析 器 将 远 快 于 eval 函数 。 


obj = JSON.parse(txt); 


























8.5.2 ”存储 JSON 对 象 


当 使 用 Storage 进行 本 地 存储 时 ， 任 何 数据 格式 在 Storage 对 象 中 都 是 以 字符 串 类 型 保存 
的 ， 所 以 如 末 保 存 有 的 数据 不 是 字符 串 ， 在 读 取 的 时 候 就 需要 日 己 进 行 类 型 的 转换 。 因 此 ， 可 以 
通过 序列 化 复杂 对 和 象 将 ISON 数据 保存 在 Storage 中 ， 以 实现 复杂 数据 类 型 保存 的 持久 化 。 

代码 清单 8-6 把 数值 型 的 数据 通过 JSON.stringify 方法 序列 化 ， 然 后 保存 到 Storage 对 
象 中 ， 在 取出 的 时 候 使 用 JSON.parse 方法 进行 反 序 列 化 ， 可 以 看 到 读 取 出 的 数据 还 是 数值 


AM, 
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代码 清单 8-6: 用 JSON 对 Storage 数据 进行 处 理 
«script type-"text/javascript" 
var datal-1, data2-1,var data3, data4,str1; 
function handleData()( 
localStorage["data" |-JSON.stringify(datal); 
str1-localStorage.getItem(" data"); 
document.writeln(str1); 
data3-JSON.parse(localStorage| "data" |); 
data4-data3--datal; 
document.write(" «br "--data4.toString()); 
j 
window.addEventListener("load", handleData, true); 
</script> 
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Web Storage 可 以 对 简单 的 关键 值 对 或 简单 对 象 进行 存 储 ， 从 而 使 本 地 会 话 存储 能 够 很 
好 地 完成 。 但 是 ， 在 对 琐 侠 的 关系 数据 进行 处 理 时 ， 它 惑 力 不 能 及 了 。 而 HTMLS 的 Web 
SQL Database API 接口 能 够 很 好 地 解决 这 一 问题 。 











9.1 核心 方法 





Web SQL Database API 实际 上 并 不 包含 在 HTMLS 规范 之 中 。 它 是 一 个 独立 的 规范 ， 引 
入 了 一 套 使 用 SQL 操作 客户 闫 数据 库 的 API。Web SQL Database 之 所 以 不 能 成 为 标准 的 主 
BIRREA SQL 不 是 一 个 标准 。 
Web SQL Database API 允许 网 页 中 包含 一 些 程序 代码 ， 而 这 些 代 码 可 以 与 客户 闹 (浏览 
48) 内 置 的 数据 库 交 互 ， 该 功能 对 试图 在 客户 曾 存 储 数据 的 应 用 程序 或 离线 浏览 的 应 用 有 很 
大 的 帮助 。 半 憾 的 是 Web SQL Database 已 经 不 再 更 新 了 。 
Web SQL Database 规范 中 定义 了 三 个 核心 方法 : 
(1) openDatabase(dbName, dbVersion, dbDisplayName, dbEstimatedSize, callbackFun)。 此 
方法 用 于 创建 数据 库 对 象 ， 既 可 以 使 用 己 有 的 数据 库 ， 也 可 以 创建 新 的 数据 库 。 
E dbName: 数据 库 实 例 名 称 ， 目 定义 。 
B dbVersion: 数据 库 版 本 。 
8 dbDisplayName: 数据 库 显 示 的 名 称 。 
B dbEstimatedSize: 数据 库 预 估 的 大 小 。 
下 callbackFun: 回调 函数 ， 为 可 选项 。 如 果 提 供 了 回调 函数 ， 用 以 调用 changeVersion() 
函数 ， 则 不 管 给 定 什么 样 的 版 本 写 ， 回 调 函 数 都 将 把 数据 库 的 版 本 号 设置 为 容 。 如 
果 没 有 提供 回调 函数 ， 则 以 给 定 的 版 本 号 创建 数据 库 。 
(2) db.transaction(callbackFun,errorCallbackFun,sucessCallbackFun)。 此 方法 允许 用 户 根 
据 情 况 控 制 事 务 提交 或 回 深 。 
WB callbackFun: 回调 函数 。 
E errorCallbackFun: 发 生 错 误 时 的 回调 函数 (可 选 参数 )。 
E successCallbackFun: 成 功 执 行 时 的 回调 函数 (可 选 参数 )。 
(3) executeSql( sqlString, arguments, successCallbackFun, errorCallbackFun)。 此 方法 用 于 
执行 真实 的 SQL 语句 。 
E sqlString: SQL 语句 ， 可 以 是 select, insert. update. delete. update 等 。 
E argument: SQL 语句 需要 的 参数 ， 一 般 是 一 个 数组 对 象 ， 如 果 SQL 语句 中 没有 参 
7b WH "DD fe. 
E successCallbackFun: 执行 成 功 时 的 回调 函数 〈 可 选 参数 )。 
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W errorCallbackFun: 产生 错误 时 的 回调 函数 〈 可 选 参数 )。 
9.2 执行 操作 
Web SQL Database 束 像 它 的 名 子 那 样 ， 束 是 一 个 让 你 可 以 在 Web 上 直接 使 用 的 SQL 数 
据 库 ， 你 要 做 的 就 是 打开 数据 库 ， 然 后 执行 SQL. 


9.2.1 打开 连接 

openDatabase 方法 打开 一 个 已 经 存在 的 数据 库 ， 如 果 数 据 库 不 存在 ， 则 创建 数据 库 。 要 
创建 并 打开 一 个 数据 库 ， 首 先 检 测 一 下 浏览 器 是 否 支 持 openDatabase 这 个 方法 ， 如 果 支 持 才 
能 定义 里 和 面 的 参数 。 代 人 码 如 下 : 


function nitDatabase(){ 
if('window.openDatabase) 1 








alert'your browser is not supported openDatabase!'); 
}elsef var db= openDatabase('mydb','1.0', "Testdb', 5*1024*1024); ! 
j 


执行 创建 数据 库 后 ， 在 Chrome 的 “开发 人 员工 具 ” 中 可 看 到 此 时 已 有 数据 库 建 立 ， 但 
并 无 表格 建立 ， 如 图 9-1 Bp. 





La B ses 
b B cookies 


HEELS 








图 9-1 Æ Chrome 中 创建 数据 库 
为 了 检测 之 前 创建 的 连接 是 人 否 成 功 ， 可 以 检查 创建 的 数据 库 对 象 是 否 为 null。 如 果 数 据 
库 对 象 不 为 null， 则 数据 库 创 建成 功 ， 人 否则 数据 库 创 建 失败 。 方 法 如 下 : 


if(!db)1 
alert('Failed to connect to database! '); 





yelse{ alert('Succeed to connect to database! '); j 


9.2.2 ”创建 数据 表 
创建 数据 表 可 以 使 用 database.transactionOFK Zi. ize GB eB ANM) 具有 一 个 类 型 
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db.transaction( function(tx) 1 } 

该 事务 具有 一 个 executeSql 函数 。 这 个 函数 使 用 四 个 参数 : 表示 奏 询 的 字符 串 、 插 入 到 
得 询 中 问号 所 在 处 的 字符 串 数 据 、 一 个 成 功 时 执行 的 函数 和 一 个 失败 时 执行 的 函数 。 

创建 数据 表 代 人 码 如 下 : 


function createTable(){ 














db.transaction(function (tx) { 
tx.executeSgl('create table if not exists info table(id integer not null primary key autoincrement, text 
name)" [],function(tx, result) (alert(" TA fT AKI!!! ")1,function(tx, error) (alert( 47 RW!!! 1); 3; 
j 
执行 上 面 的 代码 ， 在 Chrome 浏览 器 的 “开发 人 员工 具 ” 中 可 以 看 到 “mydb” 数 据 库 下 
已 经 建立 了 一 个 名 为 “info table” 的 数据 表 。 如 图 9-2 所 示 。 


® s-i x + 
> C QQ 程序 代码 /0979-1. html 





kb) (271. nta) 
T E Databases 
Y f f ardb 


S$ info table Œ 


H sqlite sequence 
» 围 Loca: Storage v 


© |>| | 








图 9-2 ”在 Chrome 中 创建 数据 表 


9.2.3 ”插入 数据 


插入 数据 操作 与 创建 数据 表 的 操作 基本 相同 ， 都 是 通过 executeSq10 方 法 来 完成 的 〈 包 
括 后 面 介 绍 的 得 询 、 更 新 以 及 删除 操作 )。 只 是 所 使 用 的 sql 语句 不 同 妥 了。 下 面 是 一 个 插入 
HJERNENS: 


function insertData() { 











db.transaction(function (tx) 1 
var names-["Tom","Rose","Kate","Lisa"]; 
for(var 1-0;1«names.length;1--) ( 
tx.executeSgl('insert into info table(name) values(?)',[names[i],nullnull); 
3) 
j 


在 上 面 的 代码 中 ， 定 义 了 一 个 names 数组 ， 这 个 数组 是 要 插入 的 name 字段 数据 。 由 于 
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前 面 定义 的 ID 字段 为 目 增 字段 ， 因 此 只 需要 直接 插入 数据 即 可 。 人 参数 中 的 问号 将 被 后 面 数 
组 中 的 对 应 数据 项 登 代 。 在 Chrome 浏览 器 的 “开发 人 员工 具 ” 中 可 以 看 到 插入 
“info table” 表 中 的 数据 ， 如 图 9-3 Drm. 


H info_table 


H sqlite_sequence | | 
可 | 
b iLocal Storage 
b BE Session Storage 
» gg Cookies 





iE | »z | q 
图 9-3 在 “info table” 中 插入 数据 
要 执行 该 插入 操作 ， 也 可 通过 下 面 的 语句 来 完成 : 


tx.executeSgl('insert into info table(id,name) values (1," Tom"); 








9.2.4 查询 数据 


执行 一 个 查询 ， 同 样 要 使 用 database.transaction0 函 数 。 该 图 数 具 有 单一 参数 ， 负 贡 谷 询 
实际 执行 的 函数 。 
当 查 询 成 功 执行 时 ， 应 用 程序 会 跳 转 至 一 个 具有 一 对 参数 的 人 查询， 一 个 是 transaction, 
另 一 个 是 它 搜集 的 results。 


执行 查询 代码 如 下 : 


function searchData()( 





db.transaction(function (tx) 1 
tx.executeSgl('select * from info table', [], function (tx, results) 1 
var len = results.rows.length, i,msg; 
msg = "«p»Found rows: " + len + "</p>"; 
document.querySelector('"status').innerHTML += msg; 
for (i = 0; i < len; 1++){ 
msg = "<p><b>" + results.rows.item(1).name + "</b></p>"; 
document.querySelector('#status'). innerHTML += msg; 
}}, null); 5); 
j 


在 Chrome 浏览 器 中 显示 的 查询 结果 如 图 9-4 所 示 。 
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92.5 fpi cjl — 
修改 和 删除 操作 与 查询 和 插入 操作 类 似 ， 都 使 用 Q |a 程序 代码 /09/9-1. htal 


Status Message 








了 上 其 有 一 个 类 型 事务 参数 的 函数 〈 通 第 是 匿名 的 )。 
db.transaction( function(tx) {} 


该 事务 使 用 executeSql 函数 执行 具体 操作 ， 如 表格 
的 创建 、 碍 询 、 插 入 、 修 改 以 及 删除 等 操作 。 


Found rows: d 





fe ARRERA P: 图 9-4 显示 查询 结果 
function UpdateData(){ 


db.transaction(function (tx) { 
tx.executeSql('update info table set name=? where id=?', ["Tomas",1], function (tx, results) { 
alert(" 修 改 成 功 ! ")}, nulD);}); 
j 
代 人 码 中 使 用 “|["Tomas",1] ”将 “info table ” 表 中 的 第 一 条 记录 进行 了 修改 ， 即 将 
“Tom” 修 改 为 “Tomas”。 删除 操作 与 之 类 似 ， 只 需 将 执行 语句 进行 如 下 修改 即 可 : 











function DeleteData(){ 
db.transaction(function (tx) { 
tx.executeSgl( delete from info table where id-?', [1], function (tx, results) { 


alert(" 删 除 成 功 ! ")}, null);]); 


9.3 完整 的 操作 实例 


在 9.2 节 中 介绍 了 openDatabase、executeSql、transaction 对 数据 操作 的 使 用 方法 ， 下 面 
给 出 完整 的 操作 代码 。 





代码 清单 9-1: Web SQL database 完整 的 操作 实例 

<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title>9-1</title> 

<script type-"text/Javascript" 

var db ; 
function InltDatabase(){ 
if(!'window.openDatabase) 1 
alert('your browser is not supported openDatabase! '); 
:else1 

db= openDatabase('mydb','1.0', "Testdb', 5*1024*1024); 
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if(!db)1 
alert('Failed to connect to database! '); 
}else{ 
createTable(); 
insertData(); 
searchData(); 
UpdateData(); 
DeleteData(); 


j 


function createTable() 1 
db.transaction(function (tx) 1 
tx.executeSql('create table if not exists info table(id integer not null primary key autoincre- 
ment, name)',[], 
function(tx, result) (alert(" 8) £& jJ] ! 3 M 4 ")1,function(tx, error) (alert(" Gi] £& Wi 11311 "1:1 
// tx.executeSgl('insert into info table(id,name) values (1,"Tom")'); 
j 
function insertData() { 
db.transaction(function (tx) 1 
var names-[" Tom","Rose","Kate"," Lisa" |; 
for(var 1=0;i<names.length;i++){ 
tx.executeSgl('insert into info table(name) values(?)';[names[i] ,null,null); 
3» 
j 


function searchData() | 
db.transaction(function (tx) 1 
tx.executeSgl('select * from info table', [], function (tx, results) 1 
var len = results.rows.length, 1,msg; 
msg = "«p»Found rows: " + len + "</p>"; 
document.querySelector('#status').innerHTML += msg; 
for (i = 0; i < len; 1++){ 
msg = "<p><b>" + results.rows.item(1).name + "</b></p>"; 
document.querySelector('#status').innerHTML += msg; 
}}, null); $); 
j 
function UpdateData()( 


db.transaction(function (tx) 1 


tx.executeSql('update info table set name=? where id—?', ["Tomas",1 |, function (tx, results) 
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alert(" 修 改 成 功 ! ")}, null); )); 
j 
function DeleteData() { 
db.transaction(function (tx) 1 
tx.executeSgl( delete from info table where id=?', [1], function (tx, results) { 
alert(" 删 除 成 功 ! ")*, nulD;?); 
j 
initDatabase(); 
</script> 
</head> 
<body> 
<div id="status" name="status">Status Message</div> 
</body> 


</html> 
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| 10.1 认识 IndexedDB 


IndexedDB (Indexed Database) 是 一 个 不 断 发 展 的 网 络 标准 。 这 个 标准 用 于 在 浏览 右 中 
存储 大 量 结构 化 的 数据 ， 并 提供 索引 以 保证 高 效率 的 得 询 。 

作为 介 于 Web Storage 和 Web SQL Database 之 间 的 一 种 形式 ， IndexedDB 与 两 者 相 比 
HARE TIFA: 

(1) 基于 数据 库 的 概念 ， 却 不 是 SQL Database. IndexedDB 的 每 个 数据 库 可 以 建立 多 个 
不 同 配置 的 表 ， 而 且 所 有 的 操作 都 在 事务 中 完成 。Web SQL Database 是 通过 SQL 执行 语句 
来 完成 操作 的 ， 而 IndexedDB 则 直接 通过 JavaScript API 完成 操作 。 

(2) 与 localStorage 相 比 ，IndexedDB 是 以 结构 化 的 JavaScript 对 象 的 方式 存储 ， 而 
localStorage 则 只 能 存储 string 类 型 。 在 实现 复杂 数据 类 型 的 持久 化 时 ，localStorage i zx V 
同 JSON.parse 和 JSON.stringify 一 起 工作 ， 而 IndexedDB 则 可 以 直接 存 取 对 象 ， 无 需 转 换 成 
FIFE. 

在 IndexedDB 中 ， 儿 乎 所 有 的 操作 均 采 用 了 command->request->result 的 方式 。 比 如 查 
询 一 条 记录 ， 返 回 一 个 request， 在 request 的 result 中 得 到 查询 结果 。 又 如 打开 数据 库 ， 返 回 
一 个 request， 在 request 的 result 中 得 到 返回 的 数据 库 引 用 。 


10.2. IndexedDB 存储 结构 


IndexedDB 使 用 的 是 一 种 对 象 存 储 机 制 ， 严 格 遵循 W3C 的 同 源 倘 略 。 也 就 是 说 访问 的 
每 个 域名 下 可 以 创建 多 个 数据 库 ， 每 个 数据 库 可 以 包含 多 个 表 《〈 存 储 对 象 )， 每 个 表 中 可 以 
存储 多 个 JSON 对 象 〈 每 个 表 都 是 一 个 JSON 对 象 列 表 )。 其 结构 如 图 10-1 所 示 。 





























[rj RO 
GR) iname study html» 1sbn? 12345678 author Tom} 
tablel—| — : 


(rdi BE) 
databasel 
[域名 
demol.cem table? 
database? 


iname:.study C333 15bn: 87654321 author Rose} 


emoJ.com 
Li 
1 





图 10-1 IndexedDB 存储 结构 
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不 同 的 源 可 以 通过 域名 访问 ， 同 样 数据 库 与 表 都 可 以 通过 其 名 称 访问 。 而 表 中 的 JSON 
数据 对 象 可 以 通过 键 什 对 和 键 路 径 访 问 。 

IndexedDB 为 ObjectStore 提供 了 两 种 访问 方式 : 键 值 对 和 键 路 径 。 键 值 对 访问 方式 与 
localStorage 中 对 JSON 数据 的 访问 方式 类 似 ， 只 不 过 localStorage 的 刍 (key) 和 值 (value) 
均 为 字符 串 ， 而 IndexedDB 中 的 键 (key〉 和 值 (value) 可 以 是 JSON 对 象 。 键 路 径 访 问 方 
式 是 把 value 中 的 某 个 属性 字段 直接 用 作 键 〈key )。 

例如 : 把 下 面 的 数据 存储 在 ObjectStore 中 ， 可 以 在 createObjectStore(0) 方 法 中 指定 键 路 
径 (keyPath) 为 {keyPath: 'ISBN',autoIncrement: false}， 表 示 这 个 表 采 用 内 部 关键 字 ， 且 关键 
字 不 是 目 增 的， 每 次 插入 数据 时 需要 手动 设 定 。 如 末 将 autoIncrement 设置 为 tue， 则 表明 这 
个 表 采 用 外 部 关键 字 ， 并 且 关 键 字 是 目 增 的 。 

var customerData = [ 


{name: "study html5", ISBN: "12345678", author: " Tom " 1, 
{name: "study CSS3", ISBN: "87654321", author: " Rose "1, 


]; 
10.3 ”适应 多 内 核 浏 览 器 


TE) 454620 8 VETE. PIC DRAN f] PIX Vas HJ ACE TE nl o ERES X T. EH e 
window.indexedDB.open () 1] JF indexedDB 数据 库 ， 但 需要 为 览 器 指定 特定 的 前 绥 ， 才 能 1 
LE DATEI. Firefox3 或 更 低 的 版 本 使 用 “-moz-”，Firefox4 以 上 则 不 需 前 级 。 
Safari 和 Chrome 使 用 “-webkit-”。 

1. 初始 化 chrome 的 实现 

目前 文 持 IndexedDB 的 webkit 内 核 浏 览 器 有 Chrome 和 做 游 3， 可 以 给 window 对 象 
indexedDB 加 上 webkit 前 级 ， 即 window.webkitIndexedDB 。 同 时 发 生变 化 的 还 有 两 个 对 象 
IDBKeyRange 和 IDBTransaction。 有 具体 代码 如 下 : 



































if (window.webkitIndexedDB) 1 
window.indexedDB = window.webkitIndexedDB; 
window.IDBKeyRange = window.webkitIDBK ey Range; 
window.IDBTransaction = window.webkitIDB Transaction; 


j 


2. 初始 化 Firefox 的 实现 
Firefox 版 本 3 (CMER) 使 用 moz 前 级 ，Firefox4 以 上 不 需 前 缀 。 如 果 想 兼容 Gecko 类 
型 内 核 的 浏览 器 ， 具 体 代码 如 下 : 


if (window.mozIndexedDB) { window.indexedDB = window.mozIndexedDB; } 


3. 初始 化 IE 的 实现 

IE10 最 新 的 预览 版 也 已 经 支持 了 IndexedDB (需要 运行 Windows 8 开发 人 员 预 览 版 运行 
此 初始 化 )， 与 window.webkitIndexedDB 和 window.mozIndexedDB 类 似 ，IE10 中 对 应 的 变量 
名 为 window.msIndexedDB。 其 体 代码 如 下 : 
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if (window.msIndexedDB) { window.indexedDB = window.msIndexedDB;} 


| 10.4 IndexedDB API 


Indexed Database API 使 用 的 是 一 种 对 象 存储 机 制 。 对 象 存 储 与 SQL 数据 库 有 许多 共同 
点 : 都 有 “数据 库 ” 和 “记录 ”的 概念 ， 每 一 个 记录 都 有 一 组 “属性 ?， 每 一 个 属性 都 要 有 
一 个 指定 的 数据 类 型 ， 这 个 数据 类 型 在 创建 数据 库 的 时 候 束 被 定义 好 了 。 可 以 选择 所 有 记录 
的 一 个 子 集 ， 然 后 使 用 “游标 ”进行 仙 历 。 对 对 和 象 的 修改 则 通过 事务 进行 。 


10.4.1 初始 化 数据 库 连 接 


W3C 为 IndexedDB 定义 了 很 多 接口 ， 其 中 Database 对 象 被 定义 为 IDBDataBase. | 而 得 
到 IDBDataBase 用 的 是 工厂 方法 ， 即 从 IDBFactory 中 取得 。 




















interface IDBEnvironment { readonly attribute IDBFactory indexedDB; }; 


在 IDBEnvironment 接口 中 定义 了 一 个 indexedDB 属性 ， 该 属性 提供 给 应 用 程序 一 种 访 
问 Indexed 数据 库 的 机 制 。 每 一 个 异步 请 求 的 方法 都 返回 一 个 IDBRequest 对 象 ， 它 通过 事件 
与 请 求 应 用 程序 交互 。window 实现 了 IDBEnvironment 接口 ， 此 可 以 和 直接 通过 
window.indexedDB 调用 该 属性 。 例 如 : 





interface IDBFactory { 
IDBOpenDBRequest open (DOMString name, [EnforceRange] optional unsigned long long version) 


raises (DOMException); 

IDBOpenDBRequest deleteDatabase (DOMString name); 

short cmp (any first, any second) raises (DOMEXxception); 
}; 


IDBFactory 接口 包括 了 两 个 方法 : openO 5 deleteDatabase () 。open () 方法 用 于 打开 数据 
库 的 连接 ， 并 返回 一 个 IDBOpenDBRequest 对 象 。 该 方法 包括 了 两 个 重要 参数 : name 与 
version。 前 者 为 要 打开 数据 库 的 名 称 ， 后 者 为 数据 库 的 “版 本 号 ” deleteDatabase() 方 法 会 
根据 数据 库 名 称 来 删除 该 数据 库 。 


interface IDBRequest : EventTarget 1 








const unsigned short LOADING - 1; /表示 状态 请 求 开始 ， 当 请 求 结 束 、 和 失败 或 取消 时 ， 
/状态 变 为 DONE。 
const unsigned short DONE = 2; // 这 个 状态 表示 在 结果 属性 中 的 前 一 个 请 求 结果 
readonly attribute any, result getraises (DOMException); ” /返回 请 求 结 果 。 如 果 请 求 失 败 或 结果 
/不 可 用 则 抛 出 卉 第。 


readonly attribute DOMError error getraises (DOMException); // 当 DONE 为 true 时 ， 得 到 的 

/这 个 属性 必须 返回 错误 请 求 。 当 DONE 为 flase IT, FEAA Jes E RJ DU HA nri o 

readonly attribute Object source; ”// 请 求 的 来 源 ， 如 索引 或 存储 对 象 。 如 果 没 有 源 存 在 ， 则 返 
//[H] null. (例如 调用 indexDB.openO 时 )。 











readonly attribute IDBTransaction transaction; /返回 请 求 的 事务 。 
readonly attribute unsigned short readyState; /请 求 状 态 。 每 个 请 求 都 以 LOADING 状态 开 





// 始 ， 当 请 求 成 功 完 成 或 发 生 错 误 时 ， 状 态 改 变 为 DONE。 
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[TreatNonCallableAsNull| 


attribute Function onsuccess ; /成 功 事件 的 事件 处 理 
| TreatNonCallableAsNull] 
attribute Function onerror; /错误 事件 的 事件 处 理 


I 

interface IDBOpenDBRequest : IDBRequest { 
[TreatNonCallableAsNull| 
attribute Function onblocked; 
[TreatNonCallableAsNull]| 
attribute Function onupgradeneeded; 


i 
IDBRequest 接口 通过 使 用 事件 处 理 函 数 的 属性 来 访问 异步 请 求 的 数据 库 和 数据 库 对 象 。 





例如 下 面 的 例子 ， 打 开 一 个 数据 库 ， 根 据 不 同 的 情形 注册 不 同 的 事件 处 理 函 数 。 


var req = window.IndexedDB.open(dbName, db Version); 
req.onsuccess = function (e) (...] 
req.onerror = function (e) {...} 


IDBOpenDBRequest 接口 继承 了 IDBRequest 接口 ， 因 此 它 可 以 实现 IDBRequest 接口 中 








的 方法 与 属性 。 上 面 的 事件 处 理 可 以 进一步 写成 下 面 的 方式 : 


var req = window.IndexedDB.open(dbName, db Version); 
req.onsuccess = function (e) (...] 

req.onupgradeneeded = function (e) {...} 

req.onerror = function (e) {...} 


当 数 据 库 打开 成 功 时 ， 将 触发 onsuccess FAF, FAS onerror 事件 。 但 是 ， 如 果 请 求 








中 的 版 本 号 和 当前 数据 库 的 版 本 写 相 同 ， 则 会 触 友 onsuccess 事件 ， 如 果 版 本 号 不 同 ， 则 会 
触发 onupgradeneeded 事件 ， 在 这 一 事件 中 可 以 对 数据 库 的 表 结 构 进 行 修改 ， 然 后 再 触发 
onsuccess 事件 。 


时 ， 
本 是 


A 友情 提示 
IndexedDB 不 允许 数据 库 中 的 表 在 同一 个 版 本 中 发 生变 化 ， 所 以 当 创 建新 表 或 删除 旧 表 
必须 使 用 一 个 不 一 样 的 版 本 号 。 它 的 作用 在 于 避免 重复 修改 数据 库 的 表 结 构 。 默 认 的 版 
空 字符 串 ""， 在 使 用 时 ， 可 以 使 用 "1.0"。 


10.4.2 ”建立 存储 对 象 


存储 对 象 是 一 个 数据 记录 集合 。 要 在 现 有 效 据 库 中 创建 一 个 新 存储 对 象 ， 则 需要 对 现 有 


数据 库 进 行 厂 本 控制 。 为 此 ， 需 打开 要 进行 版 本 控制 的 数据 库 。 如 采 布 望 创建 数据 库 的 一 个 
新 版 本 ， 则 需 打 开 比 现 有 数据 库 版 本 更 高 的 数据 库 。 这 时 会 调用 onupgradeneeded 事件 处 理 





要 创建 一 个 存储 对 象 ， 可 以 在 数据 库 对 象 上 调用 createObjectStore 方法 ， 


interface IDBDatabase : EventTarget 1 
readonly attribute DOMString name;// 返 回 连 接 数 据 库 的 名 称 。 
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readonly attribute unsigned long long version;// 返 回访 数据库 的 版 本 。 当 连接 的 数据 库 首 次 创建 
/时 ， 此 属性 值 为 0。 
readonly attribute DOMStringList ”objectStoreNames;// 连 接 的 数据 库 中 返回 当前 存储 对 象 名 称 
/列表 。 
IDBObjectstore  createObjectStore (DOMString name, optional IDBObjectStoreParameters 
optionalParameters) raises (DOMException);// 在 连接 的 数据 库 中 以 给 定 的 名 字 创 建 一 个 新 的 存储 对 
// 象 ， 并 且 返 回 它 ， 人 返回 类 型 : IDBObjectStore。 
void deleteObjectStore (DOMString name) raises (DOMException); 
/在 连接 的 数据 库 中 以 给 定 的 名 字 销 毁 一 个 存储 对 象 。 
IDBTransaction transaction (any  storeNames, optional unsigned short mode) raises 
(DOMEXxception);// 返回 一 个 IDBTransaction 对 象 ， 并 执行 创建 事务 的 操作 。 
void close (0;// 执 行 天 闭 数据 连接 的 步骤 。 
[TreatNonCallableAsNull]| 
attribute Function onabort;// 中 止 事 件 的 事件 处 理 程序 。 
[TreatNonCallableAsNulll 
attribute Function onerror;// 错 误 事 件 的 事件 处 理 程序 。 
[TreatNonCallableAsNulll 
attribute Function onversionchange;// 版 本 改变 事件 的 事件 处 理 程 序 。 




















jo 


当 被 访问 的 数据 库 版 本 号 需要 发 生 改 变 时 ，onupgradeneeded ETE xA. a UE 
该 事件 中 建立 存储 对 象 。 通 用 代码 如 下 : 


req.onupgradeneeded = function (e) { 





var db - req.result; 
vardb.createObjectStore(storeName, optionParameters); 


e 
A 友情 提示 
在 IndexedDB 中 ， 几 乎 所 有 的 操作 都 是 采用 了 command->request->result 的 方式 。 比 如 


查询 一 条 记录 ， 和 返回 一 个 request, Æ request 的 result 中 得 到 查询 结果 。 又 如 打开 数据 库 ， 返 
回 一 个 request， 在 request 的 result 中 得 到 返回 的 数据 库 引 用 。 


10.4.3 ”向 存储 对 象 中 添加 数据 


IndexedDB 标准 建议 ， 在 初始 化 时 创建 表 。 以 后 每 次 打开 浏览 右 ， 只 需要 检 醋 版 本 号 ， 
不 需要 第 二 次 创建 。 而 表 在 indexedDB 中 被 称 为 objectStore。 对 象 存 储 实现 以 下 接口 : 








interface IDBObjectStore 1 








readonly attribute DOMString name; /返回 存储 对 象 名 称 。 
readonly attribute DOMString keyPath; /返回 存储 对 象 的 键 路 径 。 


readonly attribute DOMStringList indexNames; 

/在 对 象 存储 中 提供 这 个 对 象 上 的 索引 名 称 列表 。 
readonly attribute IDBTransaction transaction; /返回 属于 这 个 对 象 存 储 的 事务 。 
IDBRequest put (any value, optional any key) raises (DOMEXxception); 
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IDBRequest add (any value, optional any key) raises (DOMException);// 将 给 定 的 值 添加 到 对 象 存 
// 信 中。 如 果 记 录 能 够 被 成 功 地 加 入 到 对 象 存储 中 ， 请 求 对 象 将 触发 一 个 成 功 事件 。 如 来 对 象 
// 存 储 中 已 经 有 这 个 记录 ， 这 个 方法 的 请 求 对 象 将 触发 一 个 错 谋 事件 ， 它 的 code 设置 为 
//CONSTRAINT ERR; 返回 类 型 : IDBRequest 
IDBRequest delete (any key) raises (DOMException);// 从 对 和 象 存 储 中 删除 请 求 的 记录 。 
IDBRequest get (any key) raises (DOMException);// 从 对 和 象 存 储 中 检索 请 求 的 记录 。 
IDBRequest clear () raises (DOMException);/ 清 除 对 象 存 储 。 包 括 从 对 象 存 储 中 删除 所 有 记录 。 
IDBRequest openCursor (optional any range, optional unsigned short direction) raises (DOM 
Exception);// 在 对 象 存 储 中 创建 此 对 象 存 储 记 录 游 标 。 
IDBIndex . createIndex (DOMString name, DOMString keyPath, optional IDBIndexParameters 
optionalParameters) raises (DOMEXxception);// 在 连接 的 数据 库 中 以 给 定 的 名 字 和 参数 创建 一 个 新 的 
JE SUE 
IDBIndex index (DOMString name) raises (DOMException);W 在 连接 的 数据 库 中 以 给 定 的 名 字 
/打开 索引 。 
void deleteIndex (DOMString indexName) raises (DOMException); 
/根据 索引 名 称 删 除 索 引 。 
IDBRequest count (optional any key) raises (DOMEXxception); 

















通过 上 和 耐 IDBDatabase 接口 的 定义 ， 可 以 从 IDBDatabase 中 取得 transaction. TE 
IndexedDB 中 ， 事 务 会 目 动 提交 或 回 深 。 无 论 是 添加 数据 、 查 询 数据 还 是 删除 数据 ， 均 可 按 
照 如 下 步 又 操作 : 

(1) 首先 创建 一 个 transaction， 它 包括 两 个 参数 ， 分 别 是 涉及 的 表 的 名 学 和 读 写 模式 ， 
表 的 名 学 可 以 是 数据 也 可 以 是 字符 串 。 访 写 模 式 分 为 以 下 三 种 : 

8 IDBTransaction.READ ONLY C Hii) 

E IDBTransaction.READ WRITE (u[ixiuf 5j) 

8 IDBTransaction. VERSION CHANGE (版 本 升级 ) 

使 用 最 多 的 是 前 两 种 。 如 有 条 不 设置 事务 级 刘 ， 则 默认 为 READ_ONLY。 

(2) 用 transaction 对 象 获 取 一 个 表 ， 需 要 传 入 的 参数 是 表 的 名 称 。 

(3) 对 通过 IDBTransaction 得 到 的 IDBObjectStore 对 象 进行 的 基本 的 表 操 作 (添加 数 
据 、 获 取 数 据 、 删 除数 据 、 清 空 表 )。 

下 面 是 回 存 储 对 象 中 添加 数据 的 通用 方法 : 


req.onsuccess = function (e) { 




















var transaction — db.transaction(storeNames, mode); 
var store — transaction.objectStore(storeName); 

var req — store.add(value, key); 

// var req — store.get(key); 

// var req = store.delete(key); 

// var req — store.clear(); 

req.onsuccess = function (e) { console.log(req.result); }; 


5 


10.4.4 ”查询 存储 的 数据 
IndexedDB 检索 存储 的 数据 是 通过 游标 来 完成 的 。 使 用 openCursor O 方法 在 对 象 存 储 中 
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创建 此 对 和 象 存储 记录 游标 。 该 方法 包括 两 个 参数 。 第 一 个 参数 为 得 询 条 件 ， 传 入 一 个 
IDBKeyRange XJ 25. 

IDBKeyRange 有 4 种 方式 调用 IDBKeyRange 的 静态 方法 ， 分 别 表示 4 种 类 型 的 查询 条 
件 。 不 同 查 询 条 件 的 设 普 方法 如 下 。 

获取 当前 关键 字 的 值 为 “12345” 的 数据 : 

IDBKeyRange.only(" 12345"); 

获取 当前 关键 字 的 值 大 于 “123456”， 并 且 不 包括 “123456” 的 数据 : 
IDBKeyRange.lowerBound("123456", true); 
获取 当前 关键 字 的 值 小 于 “123456”， 并 且 包 括 “123456” 的 数据 : 


IDBKeyRange.upperBound("123456", false); 


获取 当前 关键 字 的 值 介 于 “123456” 和 “654321 ”之 间 ， 并 日 包括 “123456”， 但 不 包 
括 “654321” 的 数据 : 


IDBKeyRange.bound(" 123456", "654321", false, true); 


第 二 个 参数 为 游标 的 方 回 ， 即 合 询 结果 的 排序 方式 。 排 厅 方 式 有 如 下 4 种 : 
(1) IDBCursor.NEXT (顺序 循环 )》 

(2) IDBCursorNEXT NO DUPLICATE (顺序 循环 不 重复 ) 

(3) IDBCursor.PREV〔 倒 序 循环 》 

(4) IDBCursorPREV NO DUPLICATE (倒序 循环 不 重复 ) 

下 面 是 从 存储 对 象 中 检索 数据 的 通用 方法 : 


function searchData() { 


var transaction — db.transaction(storeNames, mode); 























var store — transaction.objectStore(storeName); 
var range = IDBKeyRange.lowerBound(0); 
var req = store.openCursor(range, direction); 
req.onsuccess = function (e) { 
var result — this.result; 
if (result) { 
var objectData — result.value; 
console.log(objectData); 


result.continue(); 


| 10.5 MAI 


在 上 一 市 中 辣 读者 介绍 了 IndexedDB API 的 基本 使 用 方法 ， 包 括 初 始 化 数据 库 的 连接 、 
存储 对 和 象 的 建 六 、 同 存储 对 象 中 添加 数据 以 及 合 询 存储 数据 。 本 市 束 根 据 上 一 市 的 内 容 通 过 








90 


使 用 IndexedDB |F 70 3 | 


一 个 实例 反映 IndexDB API 的 用 法 。 
实例 效果 如 图 10-2 所 示 。 


? IndexedDBTest - Nozilla Firefox 





€ (3:79 c- PI 全 i 会 











编号 : 
编号 : 


lB87654 ilte 
654321 Lisa 
[567432 [Jack 
[123456 [Kate 




















图 10-2 IndexDB 实例 效果 


代码 清单 10-1: IndexDB 实现 数据 存 取 与 删除 
<!DOCTYPE HTML> 
<html> 
<head> 
<script type-"text/Javascript" sre="jquery.js"></script> 
<script type="text/Javascript"> 
var db; 
function init() { 
var req = window.mozIndexedDB.open('IndexedDBTest', '1.0*); 
req.onsuccess = function (e) { 
db = this.result; 
showObjectData(); 
J; 
req.onupgradeneeded = function (e) 1 


db = this.result; 
db.createObjectStore('user info', {keyPath: 'user id'autoIncrement: false] ); 


J; 
j 
function add( user id,user name) 1 
var objectData — 1 
user id:user id, 
user name:user name 
5 / 创建 要 存储 的 对 象 
var transaction = db.transaction('user info', IDBTransaction.READ WRITE); // 通过 
//IDBDatabase 得 到 IDBTransaction 
var store = transaction.objectStore('user info');/ 通过 IDBTransaction 得 到 IDBObjectStore 


var req — store.add(objectData); I HASC JI AS FE 
location.reload(); // 曹 独 载 入 页 面 


j 
function showObjectData() 1 


var transaction — db.transaction('user info"); 
var store = transaction.objectStore('user info); 
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var range = IDBKeyRange.lowerBound(0); / 创建 关键 学 范围 摘 述 
var req = store.openCursor(range,IDBCursor.PREV); // 创建 在 上 述 范围 内 遍历 的 游标 
req.onsuccess = function (e) { 
var result — this.result; 
if (result) { 
var objectData- result.value; 
appendObjectData(objectData); 


result.continue(); 


J; 
j 
function appendObjectData(objectData) 1 
var user id = objectData.user id; 
var user name = objectData.user name; 
var row-document.createElement("tr"); 
var idCell-document.createElement("td"); 
var nameCell-document.createElement("td"); 
idCell.textContent-user id; 
nameCell.textContent-user name; 
row.appendChild(idCell); 
row.appendChild(nameCell); 
document.getElementById("racers").appendChild(row); 
document.getElementById("racers") 
j 
function remove(user id) { 
var transaction = db.transaction('user info', IDBTransaction.READ WRITE); 


var store = transaction.objectStore('user info"); 


var req — store.delete(user id); / 删除 此 链接 
location.reload(); NEIRA RK 


} 
function clickAddBtn() { 


var user 1d=document.getElementByld("nid").value; 
var user name-document.getElementById("un").value; 
add( user id,user name); 
rows.clear(); 
j 
function clickDelBtn() { 
var user id-document.getElementBylId("delid").value; 
remove( user id); 
rows.clear(); 
j 
</script> 
</head> 
«body onLoad="init0"> 
编写 : <input id="nid" width="80"/> 
姓名 : <input id="un" width="80"/> 
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<button onClick="clickAddBtn0"> 添 加 </button><br> 

编号 : <input id="delid" width="80"/> 

«button onClick="clickDelBtn0"> 删 除 </button> 

«div id="rs"></div> 

«table id-"racers" border-"1" cellspacing-"0" style="width: 100%"> 
<th> 编 号 </th> 
<th> 姓 名 </th> 

</table> 

</body> 

</html> 


D 友情 提示 
IndexedDB 必须 在 发 布 环境 (Web 容器 ) 中 才 可 以 运行 。 
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第 11 章 文件 处 理 


11.1 File API 








在 HTML5 中 提供 了 File API， 这 使 得 从 网 页 上 访问 本 地 文件 系统 变 得 十 分 简单 。 这 个 
File API 用 来 表现 Web 应 用 的 文件 对 象 ， 可 以 通过 编程 的 方式 访问 其 信息 


o 


11.1.1 FileList 与 File 接口 


FileList 代表 者 由 本 地 系统 里 选中 的 单个 文件 组 成 的 数组 。 选 择 文件 的 用 户 接口 可 以 通 
过 <input type="file"> 调 用 实现 。 在 HTML4 F, file 控件 只 允许 选中 单个 文件 。 而 HTMLS 为 
该 控件 增加 了 multiple 属性 。 当 该 属性 为 true 时 ， 则 file 控件 允许 同时 选中 多 个 文件 。 控 件 
内 每 个 文件 就 是 一 个 file 对 象 ， 而 FileList 是 这 些 file 对 象 的 列表 。 

1. FileList 与 File 接口 描述 

FileList 接口 可 以 用 来 代表 一 组 文件 的 JavaScript 对 象 ， 如 用 户 通 过 input[type="file"] 元 
素 选 中 的 本 地 文件 列表 。FileList 接口 描述 如 下 : 





























interface FileList { 
getter File item(unsigned long index); 


readonly attribute unsigned long length; 


J: 


File 接口 用 来 表示 一 个 文件 ， 是 从 Blob 接口 继承 而 来 的 。 它 里 面 存 有 文件 的 只 读 属 性 
言 息 ， 如 文件 名 、 文 件 类 型 、 文 件数 据 访 问 的 地 址 〈 在 下 一 节 中 详细 介绍 ) SE. File 接口 描 
述 如 下 : 


interface File : Blob { 








readonly attribute DOMString name; 
readonly attribute Date lastModifiedDate; 
j; 


2. FileList 5 File 的 应 用 举例 

本 实例 主要 演示 了 如 何 通 过 multiple 属性 ， 一 次 获取 多 个 文件 的 名 称 。 实 例 在 FireFox 
中 的 效果 如 图 11-1 所 示 。 打 开 Firefox iat; CTH” > “Web 开 友 者 ” 一 “Web 
控制 台 思 ， 然 后 单 击 “ 浏 览 ” 按 钮 ， 在 弹出 的 “文件 上 载 ” 对 话 框 中 ， 一 次 选择 几 个 要 上 载 
的 文件 ， 单 击 “ 提 交 ” 按 钮 ， 将 在 控制 台 输 出 文件 的 名 称 。 
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图 11-1 获取 文件 名 称 


代码 清单 11-1: 通过 File 对 象 获取 FileList 文件 列表 
<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript"> 
function bt Click()1 
var fileInput = document.getElementById("myfile"); 
var files = fileInput.files; // files 是 一 个 FileList XJ 2& 
var file; 
for (var i ^ 0; i < files.length; i+) {V/ 通 历 所 有 文件 
file = files.item(); / 取得 一 个 文件 
/ 这 样 设置 同样 可 以 取得 一 个 文件 
// file = files[i]; 
console.log(file.name); } 





j 
</script> 
</head> 
<body> 
<input type-"file" id="myfile" multiple > 
<input type="button" onClick-"bt Click()" value=" jE AZ" 
</body> 
</html> 


11.1.2 Blob 接口 


Blob 接口 代表 原始 二 进 制 数据 ， 通 过 Blob 对 象 可 以 访问 里 面 的 字 节 数据 ， 但 是 不 可 改 
变 原 始 数 据 。 

1. Blob 接口 描述 

Blob 接口 提供 了 两 个 属性 : size 属性 代表 数据 块 的 字 节 长 度 ， type 属性 表示 Blob 的 
MIME 的 类 型 ， 如 果 是 未 知 类 型 ， 则 返回 空 。 此 外 ，Blob 接口 还 提供 了 slice 方法 ， 可 以 通 
过 该 方法 将 原始 文件 切割 并 将 结果 返回 。Blob 接口 描述 如 下 : 
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interface Blob { 
readonly attribute unsigned long long size; 
readonly attribute DOMString type; 
Blob slice(optional long long start, optional long long end, optional DOMString contentType); 
j; 


2. Blob 的 应 用 举例 

实例 一 : 使 用 size 属性 获取 文件 字 节 长 度 。 

本 实例 主要 演示 了 如 何 使 用 了 Blob 接口 的 size 属性 来 获取 所 选 文件 的 大 小 。 实 例 在 
FireFox 中 的 效果 如 图 11-2 所 示 。 打 开 Firefox 浏览 器 控制 台 (“工具 ”一 “Web 开发 者 ” 
一 “Web 控制 台 ”)， 然 后 蛙 击 “浏览 ”按钮 ， 在 弹出 的 “文件 上 载 ” 对 话 框 中 ， 一 次 选择 一 
个 或 几 个 文件 ， 单 击 “ 提 交 ” 按 钮 ， 将 在 控制 台 输 出 文件 的 名 称 和 大 小 。 如 果 获 取 文 件 类 型 
使 用 Blob 接口 的 type 属性 ， 则 使 用 方法 与 size 类 似 。 
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图 11-2 获取 文件 大 小 实例 


代码 清单 11-2: 使 用 size 属性 获取 文件 字 节 长 度 
«IDOCTYPE html> 
<html> 
<head> 
<script> 
function bt Click() { 
var nBytes — 0; 
fileInput = document.getElementById("uploadInput").files; 
fileaNum- fileInput.length; /获取 文件 个 数 
console.log(" 共 选择 "+fileaNum+" 个 文件 "); // 控 制 台 输出 选择 的 文件 个 数 
for (var 1 = 0; i< fileaNum; i++) 1 
nBytes = fileInput[i].size; /获取 文件 大 小 
fileName = fileInput.item(i).name; /获取 文件 名 称 
var fileSize = nBytes + " bytes"; 





var num-0; 
var cUnit = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"; // 设置 容量 单位 
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for ( nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, num++) { 
fileSize = nApprox.toFixed(3) + " " + cUnit[num] + " (" + nBytes + " bytes)"; /设置 每 个 文件 
的 大 小 





console.log(fileName+fileSize); // 控 制 台 输 出 文件 名 称 与 文件 大 小 
j 
j 
</script> 
</head> 
<body> 


<form name="uploadForm"> 
<p> «input id-"uploadInput" type="file" name-"myFiles" multiple> 
<input type="button" value=" 3:42" onClick="bt_Click()"></p> 
</form> 
</body> 


</html> 





实例 二 : 判断 提交 文件 类 型 


对 于 图 像 类 型 的 文件 ，Blob 接口 的 type 属性 使 用 “image/ ”开头 ， 后 跟 图 像 类 型 的 形 








式 。 利 用 这 个 特性 可 以 判断 用 户 提 交 的 文件 是 否 为 图 像 文件 。 


代码 清单 11-3: 判断 提交 文件 是 否 为 图 像 文 件 
<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript"> 
function bt Click()1 
var fileInput-document.getElementById("myfile"); 
var files-fileInput.files; 
var file; 
for(var 1-0;i«files.length;1--) ( 
file = fileInput.files|i |; 
if( /imageVNw-/.test(file.type)) 1 
alert(file.name+" 请 注意 ， 您 提交 的 不 是 图 像 文件 ! "); 
break; 
:elseí alert(file.name-" X fFPEAZ EU], WW! ");} 


j 
</script> 
</head> 
<body> 
选择 : <input type="file" id="myfile" multiple/> 
<input type="button" value=" 提 交 " onclick="bt ClickO;"/> 
</body> 


</html> 
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实例 三 : KHP ER RRRA A T e 
本 实例 使 用 对 象 URL o Sos ERA EL. NES. EREEREER E UAZ 


称 和 大 小 。 实 例 在 FireFox 中 的 效果 如 图 11-3 所 示 。 
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O 使 用 对 象 URL 来 显示 图 像 - SEIT 
Arq) RED EQ) PrE PEQ 
eR Qo: 


. < 868076 bytes 
. — D 2d04T bytes 


SERJ. Jpg: 115029 bytes 





图 11-3 通过 URL 显示 图 像 的 缩 略 图 


代码 清单 11-4: 通过 URL. 显示 图 像 的 缩 略 图 
<!DOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function bt Click() { 
window.URL = window.URL || window.webkitURL; /浏览 器 兼容 性 设置 
fileInput = document.getElementById("myfile"), 
fileList = document.getElementBylId("fileList"); 
var files-fileInput.files; 
if (!files.length) { 
alert(" 请 选择 图 片 文件 ! 0; 
relse{ 
var list = document.createElement("ul"); 
for(var i = 0; i < files.length; i++) 1 
var li = document.createElement("li"); 
list.appendChild(li); 
var img = document.createElement("img"); 
img.src = window.URL.createObjectURL(files[i]); /创建 URL 对 象 
img.height = 40; 
img.width- 60; 
img.onload = function(e) ( window.URL.revokeObjectURL (this.src); } /释放 URL XJ $& 
li.appendChild(img); 
var info = document.createElement("span"); 
info.innerHTML = files[i].name + ": " + files[i].size + " bytes"; // 设 置 选 择 文件 的 文件 名 和 大 小 
li.appendChild(info); 
j 
fileList.appendChild(list); } 
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j 
</script> 
</head> 
<body> 
请 选择 : <input type="file" id="myfile" multiple accept="image/*" > 
<input type="button" value=" 3^5" onClick-"bt ClickO"> 
<div id="fileList"> </div> 
</body> 
</html> 


在 HIMLS F, file 控件 增加 了 accept 属性 ， 目 的 是 使 file 控件 只 接收 某 种 类 型 的 文 
件 。 但 是 当前 主流 浏览 器 对 其 的 文 持 都 只 限于 打开 文件 选择 窗口 ， 默 认 选 择 “ 岁 像 ”文件 。 
设置 方式 如 下 : 














«input type-"file" id-7"myfile" multiple acceptz"image/*" > 


Gecko 2.0 内 核 的 浏览 器 支持 window.URL.createObjectURLO4fll window.URL.revokeObject- 
URL() 方 法 。 这 样 用 户 就 可 以 通过 URL 的 形式 引用 任何 数据 ， 包 括 本 地 计算 机 上 的 数据 。 对 
于 webkit 内 核 浏览 费 ， 需 要 加 “-webkit-” 前 级 。 

当 有 一 个 文件 对 象 ， 想 从 HTML 的 URL 引用 它 时 ， 可 以 像 这 样 为 它 创建 对 象 的 URL: 


var objectURL = window.URL.createObjectURL(fileObj); 





每 次 调用 window.URL.createObjectURLO 都 会 创建 一 个 唯一 的 URL 对 象 。 即 使 已 经 创建 
了 该 文件 的 URL XZ, BENARDE. KERM, URL 对 象 被 上 自动 释放 。 如 条 页 面 使 
用 动态 目 动 释放 ， 应 该 明确 地 释放 出 来 ， 通 过 调用 window.URL.revokeObjectURLQZ7 14 SH : 


window.URL.revokeObjectURL(objectURL); 


11.1.3 FileReader 接口 
FileReader 接口 提供 了 一 个 读 取 文件 的 方法 和 一 个 获取 文件 读 取 结果 的 事件 模型 。 目 前 
只 有 FireFox 浏览 器 实现 了 FileReader 接口 ， 其 他 主流 浏览 器 还 不 能 很 好 地 支持 。 可 以 通过 
下 面 的 语句 判断 浏览 右 是 否 文 持 FileReader 接口 : 











代码 清单 11-5: 浏览 器 支持 性 检测 
if (typeof FileReader == "undefined") { alert(" 非 常 抱歉 ， 您 的 浏览 器 不 支持 FileReader 接口 ! "); | 


1. FileReader 接口 方法 

FileReader 接口 包括 四 个 方法 ， 其 中 三 个 方法 用 于 读 取 文件 ， 一 个 用 于 中 上 断 恋 取 操作 。 
此 外 ，FileReader 接口 还 包括 一 个 result 属性 。 文 件 读 取 无 论 成 功 还 是 失败 ， 均 不 会 返回 读 
取 结 果 ， 而 将 结果 存储 在 result 属性 中 。 

(1) readAsArrayBuffer(Blob blob): 以 ArrayBuffer 格式 谈 取 文件 内 容 。 

(2) readAsText(Blob blob, optional DOMString encoding): 以 文本 (及 字符 捉 ) 格 式 读 取 文 
件 内 容 ， 并 且 可 以 强制 选择 文件 编码 。 第 二 个 参数 为 文本 编码 格式 ， 默 认为 UTF-8. 
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(3) readAsDataURL(Blob blob): 以 DataURL AIER FAR. 

(4) abort): 终止 读 取 操作 。 

2. FileReader 接口 事件 

除了 上 述 方法 之 外 ，FileReader 接口 还 提供 了 一 套 完备 的 获取 文件 读 取 结果 的 事件 模 
型 。FileReader 接口 事件 描述 如 下 : 

C12 onloadstart: 放 取 操作 开始 时 触发 。 

(2) onprogress: 读 取 操作 过 程 中 触 友 。 

(3) onload: IRERE IE DITAR o 

(4) onabort: 读 取 操作 被 中 汤 时 触发 。 

(5) onerror: 谈 取 操作 失败 时 触发 。 

(6) onloadend: 读 取 操作 完成 时 触发 (不 论 成 功 还 是 失败 )。 

3. FileReader 接口 应 用 举例 

实例 一 : 使 用 FileReader 进行 图 片 预 览 。 

本 实例 主要 演示 了 如 何 使 用 FileReader 接口 谈 取 图 片 文件 。 在 谈 取 文件 时 首先 判断 当前 
浏览 器 是 人 否 文 持 FileReader 接口 ， 如 果 文 持 ， 则 过 滤 抒 非 图 请 文件 。 最 后 通过 FileReader ix 
取 图 片 文件 。 实 例 在 FireFox 中 的 效果 如 图 11-4 所 示 。 























i Eozilla Firefox 
tH dB FE DEE PE IAT) Sion 
€ 3 9g---eli&$-«J0leé-i- mimis 


请 选择 : le: Document s and Se t d 











图 11-4 图 片 预览 


代码 清单 11-6: FileReader 实现 图 片 预览 
«IDOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function handleFiles(files) { 
if (typeof FileReader == "undefined") { 
alert(" 3813,12: I] 3| V Ss S EY) 
} else ( 
for (var 1 = 0; 1 < files.length; i++) { 
var file = files[i]; 
var imageType - /image.*/; 
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/通过 type 属性 进行 图 片 格式 过 滤 
if (!file.type.match(imageType)) | continue; } 
var reader = new FileReader(); /定义 FileReader 对 象 
reader.onload = function(e)1 
var result = document.getElementById("preview"); 
result.innerHTML = '«img src=" + this.result + ™ />'; 


j 
reader.readAsDataURL (file); 
j 
j 
j 

</script> 

</head> 

<body> 


请 选择 : <input id="fileInput" type="file" onChange="handleFiles(this.files);"><br><br> 
<div id="preview"> «img id="image" src="" /> 

</div> 

</body> 

</html> 





在 程序 中 通过 if (typeof FileReader == "undefined") ( PEGRAM 2A nt Du] ds zs nA 
FileReader 接口 。 由 于 IE N RRNA, Dn EHEER AETA, H 
过 使 用 正 的 DXImageTransform fE wk E Fr TU ju] ji o 





function handleFiles(files) { 
if (typeof FileReader == "undefined") 1 
if ("Microsoft Internet Explorer" == navigator.appName) { 
var preview = document.getElementBylId("preview"); 
preview.filters.item("DXImageTransform.Microsoft. AlphaImageLoader").src = 
document. E 


—M 


document.getElementById("image").style.display = "none" 
else { alert(" PUIK, K IF] VA S 11); ) 


A 友情 提示 
可 以 通过 下 面 的 语句 检测 浏览 器 是 否 支 持 File API: 


if (window.File && window.FileReader && window.FileList && window.Blob) { 
alert('File API is supported by this browser); 
} else 1 alert('File API is not supported by this browser); } 


EL FileWriter API 


FileWriter API 不 是 一 个 可 以 “独立 ”存在 的 规范 ， 它 依附 于 File API 和 FileSystem 
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API. File API 是 最 基础 的 接口 ， 而 FileSystem API 是 一 套 更 庞大 的 接口 设计 集合 。 





11.2.1 BlobBuilder 接口 


BlobBuilder 接口 用 于 构建 Blob， 完 成 此 项 任务 的 主要 方法 是 append. append 函数 接受 
三 种 数据 类 型 ，Blob 对 象 、 纯 文本 与 数组 绥 存 。 
Blob 接口 描述 如 下 ;: 


interface BlobBuilder { 
Blob getBlob (optional DOMString contentType); /返回 目前 已 放 入 的 所 有 Blob 数据 构成 的 对 象 
void append (DOMString text, optional DOMString endings); /添加 文本 数据 
void append (Blob data); /添加 Blob 数据 
void append (ArrayBuffer data); /添加 ArrayBuffer 数据 





jo 
下 面 通 过 实例 说 明 如 何 使 用 append 方法 构建 Blob 对 象 。 实 例 在 FireFox 中 的 效果 如 图 
11-5 所 示 。 





©) Eozilla Firefox 回回 加 


THEE Sm EEV [BG PE 
€ 0.97 | 


爱 我 中 华 ! 为 中 华 之 岂 起 而 读书 ! 





K| 11-5 用 BlobBuiler 构建 Blob 


代码 清单 11-7: 使 用 BlobBuilder 构建 Blob 

«script type-"text/javascript" 
var blobBuilder = new MozBlobBuilder();// 创 建 BlobBuilder 对 和 象 
blobBuilderappend(" 爱 我 中 华 ! 7); /连续 放 入 文本 
blobBuilderappend(" 为 中 华 之 凯 起 而 该 书 ! "); 
var url = window.URL.createObjectURL(blobBuilder.getBlob());//3& |E] Blob 对 象 并 以 此 创建 URL 
window.open(ur]);// 通 过 URL 打开 这 个 Blob XJ 2& 

</script> 


& 友情 提示 

对 于 不 同 的 浏览 如 ，BlobBuilder 和 window.URL 依然 存在 着 不 同 的 前 级 ， 如 webkit 内 
核 的 浏览 器 其 接口 分 别 为 WebKitBlobBuilder 和 webkitURL。 为 了 适应 不 同 的 浏览 器 ， 可 以 
使 用 下 面 的 代码 : 


function BlobBuilderSupported() 1 
if (window.BlobBuilder) { 
// No change needed - the W3C standard API will be used by default. 
} else if (window.MSBlobBuilder) 1 
window.BlobBuilder = window.MSBlobBuilder; 


102 


文件 处 理 (FIF 


} else if (window.WebKitBlobBuilder) 1 
window.BlobBuilder = window. WebKitBlobBuilder; 
velse if (window.MozBlobBuilder) { 
window.BlobBuilder = window.MozBlobBuilder; 
} else 1 alert("BlobBuilder API is not supported - try upgrading your browser to the latest version."); } 


11.2.2 FileSaver 接口 


FileSaver 接口 提供 一 些 方法 和 事件 监听 方式 ， 代 表 一 个 保存 文件 的 过 程 。FileSaver 不 能 
通过 接口 指定 要 保存 的 文件 ， 它 是 对 象 创建 时 就 已 经 确定 并 且 不 可 更 改 的 。 同 时 FileSaver 
接口 更 是 不 提供 控制 写 入 内 容 的 接口 ， 要 写 入 的 内 容 也 是 对 象 创建 时 就 已 经 确定 并 且 不 可 更 
UH. FileSaver 接口 摘 述 如 下 : 




















interface FileSaver : EventTarget { 
void abort (); /中 断 保存 操作 
const unsigned short INIT = 0; 
const unsigned short WRITING = 1; 
const unsigned short DONE - 2; 
readonly attribute unsigned short readyState; /保存 工作 状态 











readonly attribute DOMError error; // 错 误 信 息 
[TreatNonCallableAsNull]| 

attribute Function onwritestart; / 写 入 操作 开始 时 和 触发 
[TreatNonCallableAsNull]| 

attribute Function onprogress; // 写 入 操作 过 程 中 触发 
[TreatNonCallableAsNull]| 

attribute Function onwrite; / 写 入 成 功 时 触发 
[TreatNonCallableAsNull]| 

attribute Function onabort; / 写 入 操作 中 断 时 触发 
[TreatNonCallableAsNull]| 

attribute Function onerror; / 写 入 操作 失败 时 触发 
[TreatNonCallableAsNull]| 

attribute Function onwriteend; / 写 入 操作 完成 时 触发 〈 无 论 成 功 或 失败 ) 


J> 


11.2.3 FileWriter 接口 


FileWriter 接口 是 从 FileSaver 继承 而 来 ， 它 允许 多 个 写 入 操作 ， 而 不 是 仅 保 存单 个 
Blob. FileWriter 接口 描述 如 下 : 


interface FileWriter : FileSaver { 
readonly attribute unsigned long long position; // 当 前 写 入 操作 所 处 的 位 置 
readonly attribute unsigned long long length; /文件 长 度 
void write (Blob data); /在 position 位 置 处 写 入 Blob 数据 
void seek (long long offset); /设置 position fV E f fe Œ: 
void size (unsigned long long size); /在 size 处 截断 文件 
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EL FileSystem API 


FileSystem API 人 允许 用 户 创建 并 使 用 本 地 文件 系统 。 用 户 可 以 开发 一 些 基于 文件 操作 的 
Web 应 用 ， 如 读 写 文 件 、 创 建文 件 和 目录 。 

与 IndexedDB 一 样 ，FileSystem 同样 严格 遵循 同 源 策略 ， 不 同 域名 下 的 文件 乙 间 无 法 互 
相 访问 。FileSystem 限定 了 一 个 单一 的 应 用 ， 它 不 能 进入 其 他 应 用 中 。 这 就 意味 着 一 个 应 用 
不 能 读 写 在 用 户 人 硬盘 上 的 任意 文件 夹 〈( 如 我 的 文档 与 图 片 收 藏 );。 每 个 FileSystem 都 是 孤立 
的 。 此 外 ，FileSystem 还 提供 了 一 种 通过 URL 访问 文件 的 模式 。 














11.3.1 FileSystem 初始 化 


1. 打开 FileSystem 

打开 FileSystem 需要 一 个 全 局 的 方法 window.requestFileSystem()， 这 个 方法 由 window 
实例 实现 的 LocalFileSystem 接口 派生 而 来 。 通 过 请 求 一 个 LocalFile 对 象 来 得 到 HTMLS X 
件 系统 的 访问 ， 使 用 window.requetFileSystem 全 局 方法 如 下 : 








window.requestFileSystem(type, size, successCallback, opt errorCallback) 





(12 type: 文件 存储 是 否 应 该 是 持久 的 。 可 能 的 值 包括 windowTEMPORARY 和 
window.PERSISTENT。 通 过 TEMPORARY 存储 的 数据 可 由 浏览 器 自行 决定 删除 。 要 清除 
PERSISTENT 存储 ， 必 须 获 得 用 户 或 应 用 的 明确 授权 ， 并 且 需 要 用 户 癌 应 用 授予 配额 。 

(2) size: 应 用 需要 用 于 存储 的 大 小 《以 字 贡 为 单位 )。 

(3) successCallback: 文件 系统 请 求 成 功 时 调用 该 函数 。 其 参数 为 FileSystem 对 象 。 

(4) opt errorCallback: 处 理 错 误 或 获取 文件 系统 的 请 求 遭 到 拒绝 时 调用 该 冰 数 。 参 数 
为 FileError 对 象 。 

首次 调用 requestFileSystem() 时， 系统 会 为 应 用 创建 新 的 存储 。 下 面 是 一 个 使 用 
requestFileSystem() 方 法 打开 文件 系统 的 实例 。 























代码 清单 11-8: 打开 文件 系统 
«script type-"text/javascript" 
window.webkitRequestFileSystem( TEMPORARY, 1024*1024,onInitFs, errorHandler); 
function onInitFs(fs) | alert('Opened file system: ' + fs.name);] 
function errorHandler(e) { 
var msg = "; 
switch (e.code) { 
case FileBrror QUOTA EXCEEDED ERR: 
msg = 'QUOTA EXCEEDED ERR"; 
break; 
case FileError. NOT FOUND ERR: 
msg —'NOT FOUND ERR" 
break; 
case FileError SECURITY ERR: 
msg —' SECURITY ERR' 
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break; 
case FileError INVALID MODIFICATION ERR: 
msg = INVALID MODIFICATION ERR'; 
break; 
case FileErrorINVALID STATE ERR: 
msg = INVALID STATE ERR" 
break; 
default: 
msg — 'Unknown Error'; 
break; 
js 
alert('Error: ' + msg); 


j 


</script> 





代码 在 Chrome 浏览 器 中 的 运行 效果 如 图 11-6 所 示 。 














( open FuleSystem 


| € > CQ fite///E:/ T AE/ETILS/ EB PEG Y A 


Tavascript 提醒 


Üpened file system: file 0D:Temporary 





图 11-6 打开 文件 系统 


在 编写 本 书 时 ， 只 有 Chrome 浏览 器 支持 FileSystem API。 目 前 尚 不 存在 专门 用 于 文件 
配额 管理 的 浏览 占用 户 界 面 。 要 在 用 户 的 系统 上 存储 数据 ， 则 相关 应 用 可 能 需要 请 求 配额 。 
不 过 ， 可 使 用 “--unlimited-quota-for-files ”标记 运 行 Chrome 浏览 器 进行 测试 。 此 外 ， 如 果 
要 开发 的 是 用 于 Chrome 网 上 应 用 商店 的 应 用 或 扩展 程序 ， 则 可 使 用 unlimitedStorage 
清单 文件 权限 ， 而 无 需 请 求 配额 。 最 后 ， 用 户 会 收 到 授予 、 拒 绝 或 为 应 用 增加 存储 的 权 
限 对 话 框 。 

如 果 要 通过 file:// 调 试 创建 的 应 用 ， 需 要 “--allow-file-access-from-files ”标记 。 不 使 用 这 
些 标记 会 导致 SECURITY ERR 或 QUOTA EXCEEDED ERR FileError。 

下 面 以 file:/ 调 试 为 例 说 明 如 何 添加 “--allow-file-access-from-files” 标 记 。 

(D 首先 ， 用 鼠标 右键 单 击 桌面 上 的 Chrome 浏览 器 快捷 方式 图 标 ， 然 后 在 弹出 菜单 中 
选择 “属性 ”选项 。 

(2) 将 “--allow-file-access-ffom-files” 标 记 添 加 在 “Google Chrome 属性 ”对 话 框 的 
“目标 ” 栏 中 ， 如 图 11-7 所 示 。 
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Google Chrome 属性 


[wu | 快捷 方式 ast] 


fe Google Chrome 
rE- 


BAM: 应 用 程序 
BfEDDE: Application 
目标 立 ): 


hat E): | "C:\Documents and SettingsMlengQingChan 


快捷 键 oo 无 
运行 方式 QE | 常规 窗口 
mE i) [hece ess the Internet 


REED] eao] mw] 


取消 





图 11-7 “Google Chrome 属性 ”对 话 框 


重新 打开 Chrome 浏览 器 ， 在 地 址 栏 输入 file:// 进行 程序 调试 。 
.请 来 存储 配额 
PERSISTENT 进行 永久 性 存储 ， 则 必须 向 用 户 取 得 永久 存储 许可 。 而 
TEMPORARY 存储 的 数据 可 由 浏 哆 占 目 行 决定 删除 ， 所 以 不 适用 此 种 情况 。 为 了 将 PERSISTENT 
存储 与 FileSystem API 配合 使 用 ，Chrome 浏览 郁 使 用 基于 window.webkitStorageInfo 的 新 API 
以 请 求 存储 。 


代码 清单 11-9: 请 求 永久 性 存储 配额 
«script type="text/Javascript"> 
window.webkitStorageInfo.requestQuota(PERSISTENT, |. 5*1024*1024, function(grantedBytes) { 
window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs,errorHandler); 
}, function(e) { alert('Error, e); 1); 
function errorHandler (fs) { alert('There was an error); y; 
function onInitFs(fs) 1 alert('Opened filesystem: '  fs.name); }; 








</script> 


11.3.2 FileEntry 接口 


FileEntry 的 文件 系统 API 接口 代表 在 文件 系统 中 的 文件 ， 它 允许 将 内 容 写 到 一 个 文件 。 
FileEntry 接口 描述 如 下 : 


interface FileEntry : Entry { 
void createWriter (FileWriterCallback successCallback, optional ErrorCallback errorCallback); 
void file (FileCallback successCallback, optional ErrorCallback errorCallback); 


2: 
(1) createWriter: 创建 一 个 可 以 写 入 文件 的 FileWriter XJ 2. 
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(2) file: 创建 一 个 包含 文件 属性 的 File 对 象 。 
FileEntry 接口 继承 了 Entry 接口 的 属性 和 方法 ， 因 此 FileEntry 对 象 可 以 直接 使 用 Entry 
接口 的 属性 和 方法 。Entry 接口 描述 如 下 : 





interface Entry { 
readonly attribute boolean  isFile; /返回 值 总 是 true (布尔 类 型 ) 
readonly attribute boolean isDirectory; /返回 值 总 是 false (布尔 类 型 ) 
void getMetadata (MetadataCallback successCallback, optional ErrorCallback errorCallback);/ 获 
/得 文件 的 元 数据 
readonly attribute DOMString | name; //FileEntry 的 名 称 ， 不 包含 前 置 路 径 CDOMString 类 型 ) 
readonly attribute DOMString ”fullPath; /从 根 目 录 到 当前 FileEntry 的 完整 绝对 路 径 
/ (DOMString 类 型 ) 
readonly attribute FileSystem filesystem; // FileEntry 驻 留 的 文件 系统 名 称 (FileSystem 类 型 ) 
void moveTo (DirectoryEntry parent, optional DOMString newName, optional EntryCallback 
successCallback, optional ErrorCallback errorCallback); /移动 一 个 文件 到 文件 系统 中 不 同 的 位 置 
void copyTo (DirectoryEntry parent, optional DOMString newName, optional EntryCallback 
successCallback, optional ErrorCallback errorCallback); /复制 一 个 文件 到 文件 系统 中 不 同 的 位 置 
DOMString toURL 0; /返回 一 个 可 以 定位 文件 的 URL 
void remove (VoidCallback successCallback, optional ErrorCallback errorCallback); /删除 一 个 文件 
void getParent (EntryCallback successCallback, optional ErrorCallback errorCallback);//£r3X 522 H% 
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1. 创建 文件 

打开 一 个 文件 系统 后 ， 系 统 会 向 成 功 回调 传递 FileSystem 对 象 ， 其 中 包含 指向 该 应 用 相 
应 文件 系统 根 的 DirectoryEntry (fs.root)。 在 这 个 日 录 下 要 查找 或 创建 一 个 文件 ， 可 调用 它 的 
getFile() 方 法 ， 并 通过 文件 的 名 称 创建 文件 。 

下 面 在 应 用 相应 文件 系统 的 根 中 创建 名 为 file log.txt 的 空白 文件 : 








代码 清单 11-10: 使 用 getFile() 方 法 创建 文件 
«script type-"text/javascript" 
function onInitFs(fs) | 
fs.root.getFile(file log.txt', fcreate: true, exclusive: true}, function(fileEntry) 1 
alert('A file ' + fileEntry.name + ' was created successfully.'); 
}, errorHandler); 


j 

function errorHandler(e) ( --------- 省 略 错误 处 理 代 码 -------- } 

window.webkitRequestFileSystem(window. TEMPORARY, 1024*1024, onInitFs, errorHandler); 
</script> 





ARIETE Chrome 浏览 器 中 的 显示 效果 如 网 11-8 HPTR. 

TN DELE: 

请 求 文件 系统 后 ， 系 统 会 回 成 功 人 处 理 程序 传递 FileSystem 对 象 。 可 以 将 回调 中 的 
fs.root.getFile() 命 名 为 要 创建 文件 的 文件 名 。 

getFile0 方 法 的 第 一 个 参数 可 以 是 绝对 或 者 相对 路 径 ， 但 是 必须 是 合法 的 ， 如 没有 父 
目录 创建 一 个 文件 就 会 得 到 一 个 错误 。 第 二 个 参数 是 一 个 对 象 说 明 ， 如 果 文 件 不 存在 ， 
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则 描述 其 功能 行为 。 在 这 个 例子 中 ，create:true 表示 如 果 文 件 不 存在 ， 则 创建 一 个 文件 ; 
如 果 存 在 ， 则 抛 出 错误 〈exclusive:true)。 人 否则 如 果 create:false， 则 表示 人 简单 取得 文件 并 
返回 。 无 论 是 哪 种 情况 ， 系 统 都 不 会 履 善 文件 内 容 ， 因 为 我 们 只 是 获取 相关 文件 的 引用 


路 径 。 








O ek < 
c C |O £ii1e:///E: /LTE/HTMLS/TE FF TURA v | A, 


JavaScript 提醒 


Å fila file log. txt waz created zuccexzfully. 


| 确定 | 





图 11-8 创建 文件 


2. 写 入 文件 内 容 

下 面 创建 一 个 衬 的 文件 《如 采访 文件 存在 则 检索 它 )， 调 用 FileEntry 的 createWriter() 方 
法 获取 FileWriter 对 象 。 在 成 功 回 调 中 ， 为 error 事件 和 writeend 事件 设置 事件 处 理 程序 。 
通过 创建 一 个 新 的 BlobBuilder 对 象 添 加 内 容 ， 然 后 将 BlobBuilder 传递 到 FileWriter.write() 


AE. 








代码 清单 11-11: 向 文件 写 入 内 容 
«script type-"text/javascript" 
function onInitFs(fs) | 
fs.root.getFile(file log.txt', (create: true}, function(fileEntry) { 
/ 创建 一 个 可 以 号 入 文件 的 FileWriter X55 
fileEntry.createWriter(function(fileWriter) { 
fileWriter.onwriteend = function(e) | alert("Write operate completed."); ); 
fileWriter.onerror = function(e) 1 alert("Write operate failed: " + e.toString()); }; 
/创建 BlobBuilder 对 象 
var bb = new WebKitBlobBuilder(); //Chrome 中 要 使 用 window.WebKitBlobBuilde. 
bb.append(“ 爱 我 中 华 ! 7); 
fileWriter.write(bb.getBlob('text/plain')); 
}, errorHandler); 
}, errorHandler); 
j 
function errorHandler(e) { --------- B E EB VA A THER ------- j 
window.webkitRequestFileSystem(window. TEMPORARY, 1024*1024, onInitFs, errorHandler); 


</script> 


代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 11-9 所 示 。 


108 


文件 处 理 E 11 党 


y Os^xtas . 
| € > C [O rite:///1:/IHE/ETNLS/IB PF IGEB/ v N 


Javašcrıpt 提醒 


Write operate completed. 





图 11-9 文件 的 写 入 操作 


3. 读 取 文件 内 容 
调用 getFile0 方 法 只 能 返回 FileEntry 对 象 ， 不 能 返回 文件 内 容 。 要 想得到 文件 内 容 ， 则 
需要 使 用 FileReader API 读 取 文件 。 下 面 通 过 实例 说 明 如 何 使 用 FileReader 读 取 文件 内 容 。 





代码 清单 11-12: 读 取 文件 内 容 
«script type="text/javascript"> 
function onInitFs(fs) | 
fs.root.getFile(file log.txt', (create: true}, function(fileEntry) { 
// 创 建 一 个 包含 文件 属性 的 File 对 和 象 
fileEntry.file(function(file) { 
/创建 FileReader 对 象 ， 并 使 用 该 对 象 读 取 内 容 
var reader = new FileReader(); 
reader.onloadend = function(e) 1 
var txtArea = document.createElement('textarea'); 








txtArea.value = this.result; 
document.body.appendChild(txtArea); ); 
reader.readAsText(file); 
}, errorHandler); 
}, errorHandler); 


j 

function errorHandler(e) { ---------- 省 略 错误 处 理 代 码 --------- } 
window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler); 
</script> 





代码 在 Chrome 中 的 显示 效果 如 图 11-10 所 示 。 





2 读 取 文件 内 容 < u 
DE Q  O file:///E:/ILfE/BTM gy | 


ERPE 











图 11-10 文件 的 读 取 操 作 
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4. 追加 文件 内 容 

如 采 在 文件 中 已 经 号 入 了 一 些 内 容 ， 那 么 如 何 继续 添加 更 多 内 容 呢 ? 为 了 添加 内 容 到 已 
存在 的 文件 中 ， 可 以 调用 FileWriter 的 seek(0) 方 法 重新 将 writer 添加 到 文件 中 。seek RZF 
fie (byte offseb 参 数 ， 并 且 设 置 file writer 的 位 置 。 

以 下 代码 会 将 “为 中 华氏 族 的 伟大 复兴 而 奋斗 ”的 文字 退 加 到 file log 文件 结尾 。 如 末 
该 文件 不 存在 ， 则 系统 将 引 友 馈 误 。 














代码 清单 11-13: 追加 文件 内 容 
«script type-"text/javascript" 
function onInitFs(fs) | 
fs.root.getFile(file log.txt', (create:falsej, function(fileEntry) { 
/ 创建 一 个 可 以 号 入 文件 的 FileWriter 对 象 
fileEntry.createWriter(function(fileWriter) { 
/文件 写 入 的 位 置 
fileWriter.seek(fileWriter.length); 
/创建 BlobBuilder 对 象 ， 在 Chrome 浏览 器 中 使 用 window. WebKitBlobBuilder 
var bb = new WebKitBlobBuilder(); 
bb.append(' 为 中 华氏 族 的 伟大 复兴 而 奋斗 ! ); 
fileWriter.write(bb.getBlob('text/plain')); 
}, errorHandler); 





}, errorHandler); 


} 


function errorHandler(e) { 


nee: CIT I MS I 


window.webkitRequestFileSystem(window. TEMPORARY, 1024*1024, onInitFs, errorHandler); 


</script> 





运行 上 述 代 码 后 ， 再 运行 代码 清单 11-11 读 取 文件 内 容 ， 在 Chrome 中 的 效果 如 图 11-10 
所 示 。 





图 11-11 追加 文件 内 容 操 作 


5. 删除 文件 

如 果 需 要 删除 文件 ， 可 以 调用 Entry 的 remove (VoidCallback successCallback, optional 
ErrorCallback errorCallback) 方 法 。remove() 方 法 包括 两 个 参数 ， 第 一 个 参数 是 没有 参数 的 回 
调 函 数 ， 当 文件 被 成 功 删 除 后 调用 ， 第 二 个 参数 是 一 个 可 选 的 错误 回调 函数 。 
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下 面 以 删除 名 为 “file_log.txt” 的 文件 为 例 ， 说 明 如 何 使 用 remove 方法 删除 文件 。 


代码 清单 11-14: 删除 文件 

«script type-"text/javascript" 

window.webkitRequestFileSystem(window. TEMPORARY, 1024*1024, function(fs) { 
fs.root.getFile(file log.txt', (create: truej,function(fileEntry) 1 

fileEntry.remove(function() 1 alert('File successufully removed); }, errorHandler); 

}, errorHandler); 

}, errorHandler); 

function errorHandler(e) { 

—— 省 略 错误 处 理 代 码 -----…-- 
j 


</script> 





代码 在 Chrome 中 的 显示 效果 如 图 11-12 所 示 。 


J aascript 提醒 


File successufully removed! 





图 11-12 ”删除 文件 


11.3.3 DirectoryEntry 接口 


DirectoryEntry 接口 表示 文件 系统 中 的 一 个 目录 ， 访 接口 共享 了 Entry 的 属性 和 方法 〈 继 
Ik H 3$ H] Entry 接口 )。DirectoryEntry 接口 摘 述 如 下 : 





interface DirectoryEntry : Entry 1 
DirectoryReader createReader (); // 创 建 一 个 可 以 从 目录 中 读 取 条 目的 狐 DirectoryReader 对 象 
void getFile (DOMString path, optional Flags options, optional EntryCallback successCallback, 
optional ErrorCallback errorCallback); /创建 或 查找 一 个 文件 
void  getDirectory (DOMString path, optional Flags options, optional EntryCallback success 
Callback, optional ErrorCallback errorCallback); /创建 或 查找 一 个 目录 
void removeRecursively (VoidCallback successCallback, optional ErrorCallback errorCallback); 


/删除 一 个 目录 以 及 它 的 所 有 内 容 
j; 


1. 创建 目录 

前 面 所 创建 的 文件 均 是 创建 在 根 目 孙 下 ， 为 了 便于 文件 的 管理 ， 可 以 创建 指定 的 目录 ， 
将 文件 存储 在 指定 目录 下 。 使 用 DirectoryEntry 接口 的 getDirectory0) 方 法 可 以 恋 取 或 创建 目 
录 。 下 面 的 代码 将 在 root 文件 夹 中 创建 一 个 名 为 Documents 的 文件 夹 。 
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代码 清单 11-15: 在 根 目录 下 创建 文件 夹 
«script type="text/Javascript"> 
function onInitFs(fs) | 
fs.root.getDirectory('Documents', (create: true}, function(dirEntry) 1 
alert('You have just created the ' + dirEntry.name + ' directory.'); 
}, errorHandler); 


j 

function errorHandler(e) { ---------- 省 略 错 误 处 理 代 码 --------- ) 
window.webkitRequestFileSystem(window. TEMPORARY, 1024*1024, onInitFs, errorHandler); 
</script> 





代码 在 Chrome 中 的 显示 效果 如 图 11-13 所 示 。 


J avaScript 提醒 


You have just created the Documentz directory. 





图 11-13. 在 根 目录 下 创建 文件 夹 


2. 创建 子 目录 

创建 子 目 录 的 方法 与 创建 任何 目录 的 方法 完全 相同 ， 例 如 ， 为 Documents 创建 一 个 子 目 
录 MyFolder， 只 和 需 修改 getDirectory0 方 法 的 第 一 个 参数 为 “Documents/MyFolder” 即 可 。 这 
种 方法 很 简单 ， 但 是 如 果 你 想 创建 一 个 “Documents/MyFolder/MyBook/WebBook” 上 日 录 ， 采 
用 直接 修改 getDirectory0 方 法 的 第 一 个 参数 来 创建 WebBook 子 目 录 ， 则 会 得 到 错误 提示 。 
因为 你 尝试 创建 的 目录 的 直接 父 目 录 不 存在 ， 从 而 引 友 错误 。 相 应 的 解决 方法 是 ， 依 次 创建 
各 级 目录 ， 创 建 顺序 为 : Documents 一 MyFolder 一 MyBook 一 WebBook。 但 是 这 样 一 个 一 个 地 
创建 ， 效 率 低 且 非 常 腑 烦 ， 更 好 的 解决 方式 是 采用 递归 的 方式 日 动 创建 目录 。 下 和 面 以 创建 
“Documents/MyFoldervMyBookWebBook” 目 录 为 例 说 明 如 何 使 用 递归 方式 创建 子 目 录 。 



































代码 清单 11-16: 束 归 的 方式 创建 子 目 录 

«script type="text/Javascript"> 

var path = 'Documents/MyFolder/MyBook/WebBook/'; 

function createDir(rootDirEntry, folders) { 
if (folders[0] == '.' || folders[0] == ") { folders = folders.slice(1); } 
rootDirEntry.getDirectory(folders[0], create: true}, function(dirEntry) 1 

if (folders.length) 1 createDir(dirEntry, folders.slice(1)); ) 

}, errorHandler); 

上 

function onInitFs(fs) { createDir(fs.root, path.split("/)); } 
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function errorHandler(e) { ------------ 省 略 错误 处 理 代 码 ---------- } 
window.webkitRequestFileSystem(window. TEMPORARY, 1024*1024, onInitFs, errorHandler); 
</script> 





在 “Documents/MyFoldewMyBook/WebBook” 处 于 合适 的 位 置 后 ， 残 可 以 将 完整 路 径 传 
EFI getDirectory()， 然 后 在 其 下 方 创建 新 的 子 文 件 夹 。 例 如 : 


function onInitFs(fs) | 
fs.root.getDirectory("/Documents/MyFolder/MyBook/WebBook/file log.txt', (create: true}, function( 
dirEntry) 1 alert('You have just created the ' + dirEntry.name + ' directory.'); }, errorHandler); 


j 


3. 读 取 文件 目录 

要 读 取 文件 目录 ， 首 先 要 创建 DirectoryReader 对 象 ， 然 后 调用 readEntries() 77 219: HX H 
录 中 的 内 容 。 所 有 目录 条 目 不 能 在 仅 调 用 一 次 readEntriesO 的 情况 下 同时 返回 ， 这 残 需要 一 
直 调 用 DirectoryReader.readEntries()， 直 到 系统 不 再 返回 结果 为 止 。 














代码 清单 11-17: 使 用 DirectoryReader 对 象 读 取 文件 目录 


«script type="text/javascript"> 
function onInitFs(fs) | 
fs.root.getDirectory('Documents/MyFolder/MyBook/WebBook/,, {}, function(dirEntry)( 
var dirReader = dirEntry.createReader(); 
dirReader.readEntries(function(entries) 1 
for(var i = 0; 1 < entries.length; i++) 1 
var entry = entries[1]; 
if (entry.isDirectory) { 
alert('Directory: ' + entry.fullPath); 
velse if (entry.isFile) ( alert('File: ' + entry.fullPath); } 
j 


}, errorHandler);), errorHandler); 


j 
function errorHandler(e) { ---------- 省 略 错 误 处 理 代 人 码 ---------- } 
window.webkitRequestFileSystem(window. TEMPORARY, 1024*1024, onInitFs, errorHandler); 


</script> 
代码 测试 ， 首 先 运 行 代 码 请 单 11-16， 创 建 子 目录 。 然 后 按照 代 但 清单 11-10 的 方式 创 
建文 件 file log.txt (CXF: Documents/MyFolder/MyBook/WebBook/file log.txt)。 最 后 


运行 上 述 代 码 ， 在 Chrome 中 的 显示 效果 如 图 11-14 所 示 。 
Les rer] s ji 





i 






谍 取 文件 目录 
€ Q (D file:///E:/LE/ETMLS/FgPFIUDS/ vg A 





JavaScript 提醒 





File: /Doeumentz/MyFlodar/MyBock/WabBook/£file log. txt 


确定 


图 11-14 读 取 文件 目录 
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4. 删除 目录 

可 以 通过 两 种 方式 删除 一 个 DirectoryEntry， 一 种 是 使 用 remove0 方 法 ， 另 一 种 是 使 用 
removeRecursively0。 二 者 的 区 别 是 ， 前 者 需要 被 删除 文件 夹 为 空 ， 人 否则 会 得 到 错误 ;后 者 
则 删除 一 个 目录 以 及 它 的 所 有 内 容 。 





代码 清单 11-18: 使 用 removeRecursively() 方 法 删除 目录 
«script type="text/Javascript"> 
function onInitFs(fs) | 
fs.root.getDirectory('Documents/MyFolder, 1), function(dirEntry) { 
dirEntry.removeRecursively(function() | alert('Directory successufully removed.'); }, errorHandler); 


}, errorHandler); 


j 

function errorHandler(e) { ------------- 省 略 错 误 处 理 代码 ------------- } 
window.webkitRequestFileSystem(window. TEMPORARY, 1024*1024, onInitFs, errorHandler); 
</script> 





代 人 码 在 Chrome 浏览 器 中 的 显示 效果 如 图 11-15 所 示 。 





Javascript 


Directory zuccezzufully removed. 














图 11-1$ 删除 目录 操作 


5. 处 理 文件 和 目录 

FileEntry 和 DirectoryEntry 均 继 承 了 Entry 接口 ， 它 们 分 享 同 一 个 API 方法 来 复制 、 移 
动 和 重 命名 文件 或 目录 。 

(D 复制 操作 

使 用 copyTo0 方 法 可 以 将 一 个 文件 复制 到 文件 系统 中 的 不 同位 置 ， 这 个 方法 继承 目 
Entry 接口 。 





copyTo (DirectoryEntry parent, optional DOMString newName, optional EntryCallback successCallback, 
optional ErrorCallback errorCallback); 
第 一 个 参数 是 目标 父 目 孙 ， 即 布 望 复 制 到 的 位 置 。 第 二 个 参数 是 可 选 的 新 文件 名 字 ， 实 
际 上 只 有 复制 到 同一 个 目录 时 才 需 要 ， 人 否则 得 到 错误 信息 。 








代码 清单 11-19: 将 文件 log.txt 从 根 目录 下 复制 到 Documents 目录 下 
«script type="text/Javascript"> 
function copy(currDir, srcEntry, destDir) { 
currDir.getFile(srcEntry, {}, function(fileEntry) { 
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currDir.getDirectory(destDir, (3, function(dirEntry) { fileEntry.copyTo(dirEntry); }, errorHandler); 
}, errorHandler); 

j 

function errorHandler(e) { ----------- 省 略 错误 处 理 代 码 ----------- } 

window.requestFileSystem(window. TEMPORARY, 1024*1024, function(fs) { 

copy(fs.root, 'log.txt', Documents/"); 

}, errorHandler); 
</script> 


(2) 移动 操作 
使 用 moveTo0 方 法 可 以 将 一 个 文件 移动 到 文件 系统 中 的 不 同位 置 ， 这 个 方法 继承 目 
Entry 接口 。 





moveTo (DirectoryEntry parent, optional DOMString newName, optional EntryCallback successCallback, 
optional ErrorCallIback errorCallback); 


第 一 个 参数 是 目标 父 目 录 ， 即 希望 复制 到 的 位 置 。 第 二 个 参数 是 可 选 的 新 文件 名 季 ， 实 
际 只 有 复制 到 同一 个 目录 时 才 需 要 ， 人 否则 得 到 错误 信息 。 








代码 清单 11-20: 移动 log.txt 到 Documents 
«script type-"text/javascript" 
function move(currDir, srcEntry, dirName) { 
currDir.getFile(srcEntry, {}, function(fileEntry) { 
currDir.getDirectory(dirName, {}, function(dirEntry) { fileEntry.moveTo(dirEntry); }, errorHandler); 
}, errorHandler); 
j 
function errorHandler(e) ( ------------ 75 WE EVE PUR - -------- } 
window.requestFileSystem(window. TEMPORARY, 1024*1024, function(fs) { 
move(fs.root, 'log.txt', Documents/); 
}, errorHandler); 
</script> 


(3) EMA ERNE 
移动 一 个 文件 或 目录 时 ， 可 以 选择 重 命名 。moveTo( 方 法 的 第 二 个 参数 接受 可 选 的 新 名 
称 ， 因 此 可 以 重 命名 一 个 文件 或 目录 。 











代码 清单 11-21: 将 log.txt 重 命名 为 file_log.txt 
«script type-"text/javascript" 
function rename(currDir, srcEntry, newName) { 
currDir.getFile(srcEntry, 1), function(fileEntry) { 
fileEntry.moveTo(currDir, newName); 
}, errorHandler); 
} 
function errorHandler(e) { ------------ 25 WE EE VA ME PUR - -------- } 
window.requestFileSystem(window. TEMPORARY, 1024*1024, function(fs) { 
rename(fs.root, 'log.txt', 'file log.txt'); 
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}, errorHandler); 


</script> 


11.3.4 FileSystem URL 


每 个 Entry 对 象 都 对 应 着 一 个 URL 地 址 ， 可 以 通过 Entry 对 象 得 到 其 URL。 同 样 也 可 以 
通过 一 个 URL 找到 相应 的 Entry X12. 

为 FileEntry 或 DirectoryEntry 获取 FileSystem URL， 可 以 通过 调用 toURL0O 方 法 来 实 
现 。 例 如 ， 在 存 入 图 片 后， 执行 下 和 面 的 代码 ， 图 片 就 可 以 在 页 和 面 中 显示 出 来 了 。 








var img = document.createElement(' photo"); 
img.src = fileEntry.coURL(); 
//'Aflfilesystem:file:///temporary/file.png' 


document.body.appendChild(1mg); 


如 果 已 具备 filesystem: 网 址 ， 则 可 使 用 resolveLocalFileSystemURL() 找 回 fileEntry 。 
例如 : 


window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || 

window.webkitResolveLocalFileSystemURL; 

var url = 'filesystem:file:///temporary/file log.png; 

window.resolveLocalFileSystemURL (url, function(fileEntry) 1 
alert(fileEntry.name); 

},errorHandler); 
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12.1 drag and drop 简介 


传统 意义 上 的 拖 放 (drag and drop) 行为 实际 都 是 使 用 DOM 事件 模型 中 的 
Mousedown, Mouseover, Mouseup 等 事件 来 监听 鼠标 的 动作 ， 不 停 地 获取 鼠标 的 坐标 来 修 
改元 系 的 位 置 。 但 是 这 只 文 持 浏 览 右 内 部 的 拖 放 ， 而 且 会 导致 代码 比较 多 ， 造 成 性 能 下 降 。 

HTMLS 通常 只 需要 dragStart、drag、drop 这 三 个 事件 就 够 了 ， 如 果 和 需要 在 进入 drop 的 
区 域 有 视觉 效果 变化 ， 那 么 最 多 增加 dragEnter、dragLeave 这 两 个 事件 就 可 以 了 ， 同 时 也 大 
大 简化 了 拖 放 操作 的 代码 。 


| 12.2 drag and drop API 


12.2.1 j| A as oc T4 PEU 

使 用 Modernizr 可 检测 浏览 器 是 否 文 持 拖 放 功 能 ， 是 无 需 调 用 任何 事件 的 初始 化 方法 。 
当 它 运行 的 时 候 ， 会 创建 一 个 modernizr 的 全 局 对 象 ， 该 对 象 会 为 每 个 需要 检测 的 特性 创建 
一 个 布尔 型 的 属性 。 
































代码 清单 12-1: 检测 浏览 器 是 否 文 持 拖 放 功能 
ifí(Modernizr.draganddrop) 1 
alert("OK,This browser Supports drag and drop!"); 
} else { alert("Sorry, This browser does not Support drag and drop!") } 


12.2.2 drag and drop 事件 

在 拖 放 操 作 过 程 中 将 触发 一 些 相关 的 事件 ， 这 些 事件 构成 了 整个 拖 放 过 程 。 成 功 完成 一 
次 页 面 内 元 又 拖 放 的 行为 事件 的 过 程 应 该 是 : dragstart 一 dragenter 一 dragover 一 drop 一 dragend。 
有 了 这 些 事件 ， 通 过 JavaScript 就 可 以 处 理 整 个 拖 放 过 程 。 拖 放 事 件 摘 述 见 表 12-1. 











表 12-1 拖 放 事件 
dragstart 当 拖 放 元 素 开 始 被 拖 放 的 时 候 触 发 的 事件 被 拖 放 对 象 
drag 当 对 象 被 拖 动 时 束 会 触发 被 拖 放 对 象 
dragenter 当 拖 放 元 素 进 入 目标 元 素 的 时 候 触 发 的 事件 目标 对 象 
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dragleave 当 拖 放 离 开 时 触发 先前 目标 对 象 
dragover 拖 放 元 素 在 目标 元 素 上 移动 的 时 候 触 发 的 事件 当前 目标 对 和 象 


drop 被 拖 放 的 元 素 在 目标 元 素 上 同时 鼠标 放 开 触发 的 事件 当前 目标 对 和 象 
dragend 当 拖 放 完 成 后 触发 的 事件 被 拖 动 对 象 


12.2.3 DataTransfer 对 象 


HTMLS 文 持 拖 放 数 据 存储 ， 使 dataTransfer 接口 作用 于 元 系 的 拖 放 基础 上 。dataTransfer 
对 象 包含 以 下 属性 和 方法 : 

(1) dataTransfer.dropEffect [ = value ]: 返回 已 选择 的 拖 放 效果 ， 如 果 该 操作 效果 与 起 初 
设置 的 effectAllowed 效果 不 符 ， 则 拖 放 操作 失败 。 可 以 修改 设置 ， 包 含 这 儿 个 值 :“none” 
"copy". “link” 4 “move”. 

(2) dataTransfer. Pe ed [ = value ]: 返回 允许 执行 的 拖 放 操 作 效 果 ， 可 以 修改 设 
置 ， 包 含 这 些 值 : "none". *copy". *copyLink". *copyMove". “link”, *linkMove ”、 
































“move”, “all” J “uninitialized”. 

(3) dataTransfertypes: 返回 在 dragstart 事件 触发 时 为 元 素 存 储 数据 的 格式 ， 如 末 是 外 
部 文件 的 拖 放 ， 则 返回 “files”。 

(4) dataTransfer.clearData ( [ format ] ): 删除 指定 格式 的 数据 ， 如 果 未 指定 格式 ， 则 删 
除 当前 元 系 的 所 有 携 市 数据 。 

(5) dataTransfer.setData(format, data): 7J76 38S JH XE 2505 o 

(6) dataTransfer.getData(format): 返回 指定 数据 ， 如 果 数 据 不 存在 ， 则 返回 空 学 
f] e 

(7) dataTransferfiles: 如 末 是 拖 放 文件 ， 则 返回 正在 拖 放 的 文件 列表 FileList. 

(8) dataTransfer.setDragImage(element, x, y): 制定 拖 放 元 又 时 跟随 鼠标 移动 的 图 片 。x、 

分 别 是 相对 于 鼠标 的 举 标 。 

(9) dataTransfer.addElement(element): 湛 加 一 起 跟随 拖 放 的 元 素 ， 如 果 要 让 某 个 元 素 跟 
随和 被 拖 放 元 素 一 同居 拖 放 ， 则 使 用 此 方法 。 

在 dragstart 事件 触发 时 可 以 为 和 被 拖 放 元 素 存 储 数 据 ， 束 是 使 用 上 和 面 说 到 的 
dataTransfer.setData。 setData 的 数据 格式 一 般 有 四 种 : textplain〈 用 于 文本 数据 )、texturl-list 
(HF url1)、text/html (HF HTML 文学 )、text/xml (用 于 XML 文字 )。 可 以 先 为 某 个 可 拖 
MICR KEMAH” AN CEEA draggable 属性 为 true， 之 后 在 dragstart 事件 触发 时 
存储 数据 。 


| 12.3 drag and drop 过 程 


本 节 通 过 一 个 实例 说 明 如 何 使 用 拖 放 事件 实现 对 象 的 拖 放 。 此 实例 的 功能 是 将 图 12-1 
中 的 图 片 ， itis 边 的 边框 里 ， 完 成 后 的 效果 如 图 12-2 所 示 。 
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图 12-1 拖 放 前 效果 图 12-2 拖 放 后 效果 


代码 清单 12-2: 拖 放 图 片 实例 

«IDOCTYPE HTML> 

<html> 

<head> 

<style type="text/css"> 

#boxA, #boxB,#boxC { float:left; | 

#boxA 1 width:200px; height:200px; } 

ZboxB,£boxC 1 border:ridge; width:200px; height:200px; | 

</style> 

«script type="text/Javascript"> 

function dragStart(ev) { 
ev.dataTransfer.effectAllowed-'move'"; 
ev.dataTransfer.setData(" Text", ev.target.getAttribute('1id")); 
ev.dataTransfer.setDragImage(ev.target,0,0); } 

function dragEnter(ev) { ev.preventDefault(); } 

function dragOver(ev) { ev.preventDefault(); ! 

function dragDrop(ev) 1 
var src — ev.dataTransfer.getData(" Text"); 
ev.target.appendChild(document.getElementBylId(src)); 
ev.preventDefault();) 

</script> 

</head> 

<body> 

<div 1d="boxC"> 

«img id="boxA" src-"images/0001.png" draggable="true"; ondragstart="dragStart(event)"></div> 

<div id="boxB" ondragenter="dragEnter(event)" ondrop="dragDrop(event)" 

ondragover="dragOver(event)"> 

</div> 

</body> 

</html> 


上 面 的 代码 看 起 来 可 能 有 点 复杂 ， 但 是 整个 例子 演示 了 拖 放 事件 的 核心 内 容 。 一 个 拖 放 
过 程 大 致 可 以 分 解 为 以 下 几 个 步骤 。 

1. 创建 拖 放 对 象 

所 有 HTML 7528 4E. draggable RIE, ETE 2s B6 5 0516 2], Ex EROS AID 
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draggable 属性 为 true。draggable 属性 具有 三 个 值 ， 分 别 是 : true 表示 能 够 被 拖 动 : false 表示 
不 能 够 被 皂 动 ，auto 表示 视 浏览 右 而 定 。 代 人 如 下 : 


«div 1d="boxC"> 
«img 1d="boxA" src-"images/0001 .png" draggable="true"; ondragstart="return dragStart(event)"> 


</div> 


2. 拖 动 对 象 

指定 当 一 个 元 素 被 拖 动 的 时 候 会 执行 的 操作 。 开 始 拖 动 时 触发 ondragstart 事件 ， 在 
ondragstart 事件 处 理 中 使 用 setData(0) 方 法 指定 哪个 数据 被 拖 动 ，dataTransfersetData() 方 法 可 
设置 数据 芮 型 和 被 拖 动 的 数据 。 代 人 码 如 下 : 





function dragStart(ev) { 
ev.dataTransfer.effectAllowed-'move'"; 
ev.dataTransfer.setData(" Text", ev.target.getAttribute('id")); 
ev.dataTransfer.setDragImage(ev.target,0,0); 


j 


3. 放置 对 象 

ondragover 事件 指定 了 拖 动 的 元 素 可 以 被 放置 的 位 置 。 为 了 允许 drop, ， 需 调用 
preventDefault0 方 法 来 阻止 浏览 器 的 默认 数据 处 理 方式 。 因 为 在 默认 的 情况 下 ， 拖 放 的 目标 是 
不 允许 接收 元 素 的 ， 因 此 为 了 把 拖 动 的 元 素 放置 其 中 ， 必 须 把 默认 处 理 方式 关闭 。 代 码 如 下 : 





function dragOver(ev) 1 ev.preventDefault(); ! 
4. 执行 放置 
当 可 拖 动 的 数据 被 放置 的 时 候 ， 触 发 drop 事件 。 目 标 元 素 接收 到 被 拖 放 的 元 系 后 ， 则 
执行 getData0) 方 法 从 dataTransfer 中 获取 数据 。getData0) 方 法 中 的 数据 类 型 与 setData() 77 1 
数据 类 型 相同 。 代 码 如 下 : 











function dragDrop(ev) 1 
var src — ev.dataTransfer.getData(" Text"); 
ev.target.appendChild(document.getElementBylId(src)); 
ev.preventDefault(); 
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HTMLS 的 Geolocation API 可 以 将 用 户 当 前 的 地 理 位 置 共享 给 信任 的 站 点 。 由 于 这 涉及 用 户 
的 隐私 安全 问题 ， 因 此 当 一 个 站 点 要 获取 用 户 当前 位 置 时 ， 浏览 器 会 提示 用 户 是 “允许 ”还 是 
E I ”。 还 可 以 通过 页 面 的 JavaScript 获取 纬度 和 经 度 信息 ， 这 些 信 息 可 以 发 送 到 远程 服务 器 
， 以 全 完成 一 些 与 位 置 相关 的 操作 ， 比 如 本 地 商业 信息 或 者 在 地 图 上 显示 用 户 的 位 置 等 。 
Geolocation API 存在 于 navigator 对 象 中 ， 只 包含 以 下 3 个 方法 : 





位 





















































interface Geolocation { 
void getCurrentPosition( PositionCallback successCallback, optional PositionErrorCallback errorCallback, 
optional PositionOptions options); 
long watchPosition(PositionCallback successCallback, optional PositionErrorCallback errorCallback, 
optional PositionOptions options); 
void clearWatch(long watchlId); 


DS 


13.1 浏览 器 文 持 性 检测 





HTMLS Geolocation API 封装 在 navigator.geolocation 属性 里 。 如 果 浏 览 器 支持 
Geolocation API 的 话 ， 在 全 局 的 navigator 对 象 上 会 有 一 个 geolocation 的 属性 ， 反 之 ， 该 属 
性 值 为 undefined。 代 码 如 下 : 





代码 清单 13-1: Geolocation 浏览 器 支持 性 检测 
if(navigator.geolocation) { 
alert("HTMLS Geolocation supported! "); 
} else 1 alert("HTMLS Geolocation is not supported! "); } 








同样 地 ， 如 来 不 想 目 己 杀 手 去 写 这 个 检测 方法 的 话 ， 可 以 使 用 Modernizr AAWA v sis 
是 否 支 持 Geolocation API。 代 码 如 下 : 


if( Modernizr.geolocation)( 
alert("HTMLS Geolocation supported!"); 


y else 1 alert("HTMLS Geolocation is not supported!"); j 


13.2 RAAK 








在 许多 应 用 中 ， Hs 要 检索 一 次 用 户 的 位 置信 息 。 像 这 样 的 情况 ， 称 为 时 次 位 置 请 求 。 
如 检索 附近 商店 的 位 置 
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Geolocation API 可 以 让 信 任 的 网 站 分 享 位 置信 息 。 可 以 通过 页 面 的 JavaScript 3R £l RE 
和 经 度 信息 ， 这 些 信息 可 以 发 送 到 远程 服务 器 上 ， 以 便 完 成 一 些 与 位 置 相 关 的 操作 ， 比 如 本 
地 商业 信息 或 者 在 地 图 上 显示 用 户 位 置 等 。 

获取 当前 位 置信 息 可 以 使 用 下 面 的 方法 : 





























void getCurrentPosition(PositionCallback successCallback, optional PositionErrorCallback errorCallback, 


optional PositionOptions options); 








调用 getCurrentPosition(0) 方 法 可 以 获得 用 户 当 前 的 位 置 。 访 方法 会 问 用 户 发 送 一 个 异步 
请 求 ， 获 得 用 户 最 近 的 位 置信 息 。 访 方法 有 三 个 参数 ， 在 定位 成 功 则 执行 第 一 个 回调 函数 ， 
后 两 个 为 可 选 参数 ， 分 别 为 当 发 生 错 误 时 执行 的 回调 函数 和 最 大 的 请 求 等 竺 时间 。 

(1) successCallback: HP MIF Rrr geolocation 成 功 后 的 回调 方法 。 

(2) errorCallback: 可 选 ， 用 于 获取 地 理 位 置信 息 失 败 的 处 理 方法 ， 包 含 code 和 
message 两 个 属性 。 

(3) options: 可 选 ， 用 于 获取 用 户 位 置信 息 的 配置 参数 。 


13.2.1 获取 位 置信 息 


getCurrentPosition 方法 中 的 第 一 个 参数 为 获取 当前 地 理 位 置信 息 成 功 时 所 执行 的 函数 。 
该 函数 使 用 方法 如 下 : 






































if(navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(sucessCurrentPosition); 


y else 1 alert("HTMLS Geolocation is not supported! "); } 


successCurrentPosition 接收 一 个 position 对 象 作 为 参数 ， 该 对 象 包含 的 属性 如 
表 13-1 所 示 。 





表 13-1 position 对 象 包 含 的 属性 





m E 类 H Ui  — 8j 
coords.latitude 纬度 。 十 进 制 浮 点 数 ， 单 位 : 度 
coords.longitude 经 度 。 十 进 制 浮 点 数 ， 单 位 : B 
coords.altitude 海拔 。 单 位 : 米 
coords.accuracy 精度 。 单 位 : 米 
coords.altitudeA ccuracy 海拔 精度 。 单 位 : 米 
coords.heading 与 正 北 方 癌 的 偶 移 角度 。 顺 时 针 方 向 ， 单 位 : BE 
coords.speed 移动 速度 。 单 位 : 米 / 秘 
timestamp 同 Date0 一 样 


全 友情 提示 

只 有 三 个 属性 是 必须 有 值 的 : coords.latitude、coords.longitude 和 coords.accuracy。 其 余 
的 可 以 是 null， 这 取决 于 有 具体 设备 和 后 端 位 置 服务 器 的 能 力 。 如 果 有 的 话 ，heading 和 speed 
属性 则 要 根据 先前 的 位 置 计算 出 来 。 
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代码 清单 13-2: position 对 象 的 使 用 
<IDOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function getLocation(){ 
if(navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(sucessCurrentPosition ); 
} else { alert("HTMLS Geolocation is not supported! "); } 
j 
function sucessCurrentPosition(position)( 
var latitude — position.coords.latitude; 
var longitude — position.coords.longitude; 
alert("Latitude : " + latitude + " Longitude: " + longitude); 
j 
</script> 
</head> 
<body> 
<input type="button" onclick-"getLocation();" value=" 获 取 本 地 地 理 位 置 "/> 
</body> 
</html> 








当 单 击 “获取 本 地 地 理 位 置 ” 按 钮 时 ， 会 出 现 “是 和 否 共 享 位 置信 息 ” 的 提示 ， 当 用 户 
允许 共享 其 信息 后 ， 将 会 弹出 用 户 的 当前 位 置 提示 信息 。 代 人 码 在 Chrome 浏览 器 中 的 显示 效 
果 如 图 13-1 所 示 。 




















2 获取 本 地 地 理 位 置 
€ Q |Q 127.0. 0. 1/indexedDBE/13-2. htn1 © Y `q 


获取 本 地 地 理 位 置 
127.0.0.1 says: 上 的 网 页 


Latitude : 39, 121079 Longitude: 11T.214388 





图 13-1 获取 本 地 地 理 位 置 


A 友情 提示 

目前 ， 用 Chrome 浏览 器 查看 位 置信 息 ， 需 要 将 其 部 署 到 Web 环境 中 。 
13.2.2 ”错误 处 理 

由 于 地 理 位 置 很 复 杀 ， 有 时 可 能 会 出 现 错误 。 人 例如， 浏览 器 要 求 “ 用 户 同意 ”共享 位 置 
信息 ， 但 是 用 户 却 不 同意 。 此 时 ， 用 户 选 择 肯 和 定 要 放 在 第 一 位 。 那 么 我 们 的 代码 怎么 写 呢 ? 
XXNLHIS] f getCurrentPosition0 的 第 二 个 参数 : 错误 处 理 的 回调 函数 。 
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这 个 可 选 参数 当 处 理 异 步调 用 发 生 错 误 时 ， 调 用 指定 的 错误 处 理 图 数 ， 其 参数 是 
PositionError 对 象 〈 返 回 的 邓 "s Hif PositionError 对 象 中 )。PositionError 对 象 的 属性 
Jide 13-2. 








表 13-2 positionError 对 象 包 含 的 属性 
E 性 类 y "EN 
T O A 
rs ID 


其 中 code 错误 代码 包括 以 下 四 个 值 : 

(12 UNKNOWN ERROR【〔 错 误 代 人 码 为 0): 表示 不 包括 在 其 他 错误 代码 中 的 错误 ， 需 
要 在 message 参数 中 查找 错误 信息 。 

(2) PERMISSION DENIED (错误 代码 为 1): 表示 用 户 拒 绝 浏 览 器 获取 位 置信 息 
的 请 求 。 

(3) POSITION UNAVAILABLE 错误 代 人 码 为 2): 表示 网 络 不 可 用 或 者 连接 不 到 卫星 
(获取 不 到 位 置信 息 )。 

(4) TIMEOUT 《错误 代码 为 3): 表示 获取 超时 。 必 须 在 options 中 指定 了 timeout 值 时 
才 有 可 能 发 生 这 种 销 误 。 

代码 如 下 : 




















代码 清单 13-3: 错误 处 理 
«IDOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
function getLocation() { 
if(navigator.geolocation) { 
var options = {timeout:60000}; 
navigator.geolocation.getCurrentPosition(sucessCurrentPosition, errorHandler, options); 
} else { alert("HTMLS Geolocation is not supported! "); } 
j 
function errorHandler(err) | 
switch(err.code) ( 
case 0: 
alert("Error:"-err.message); 
break; 
case 1: 
alert("Error: Access is denied!"); 
break; 
case 2: 
alert("Error: Position is unavailable!"); 
break; 
case 3: 
alert("Error: TimeOut!"); 
break; 
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function sucessCurrentPosition(position){ — ............ i 
</script> 
</head> 
<body> 
<input type="button" onclick-"getLocation();" value=" 获 取 本 地 地 理 位 置 "/> 
</body> 
</html> 





运行 程序 后 ， 当 单 击 “ 获 取 本 地 地 理 位 置 ” 按 钮 后 ， 和 触发 隐私 保护 机 制 。 当 选择 “ 拒 
绝 ” 共 享 信息 时 ， 则 返回 错误 代码 2。 在 Chrome 浏览 器 中 的 显示 效果 如 图 13-2 所 示 。 











铺 误 处 理 
-+> 已 | 加 127.0.0,1:/ 工 作 /HTNL5/ 程 序 代码 


获取 本 地 地 理 位 置 


JavaScript 提醒 


Error: Access is denied! 








图 13-2 ”错误 处 理 


13.2.3 ”可 选 位 置 特 性 


getCurrentPosition() KAA 98 — ^ u] 362 2 
属性 ， 所 有 属性 都 是 可 选 的 。 

PositionOptions 对 象 的 属性 如 下 : 

(1) enableHighAccuracy: 是 否 要 求 高 精度 的 地 理 位 置信 息 。 参 数 默认 值 为 falses WR 
设置 为 ttue， 并 且 设 备 也 支持 、 用 户 也 希望 共享 自己 的 准确 位 置 ， 那 么 设备 就 会 洗 试 获取 蜗 
精度 值 。 如 果 局 动 了 该 参数 ， 可 能 没有 任何 差别 。 例 如 ，iPhone 和 Android 手机 对 低 精 度 、 
局 精度 位 置信 息 都 有 独立 的 权限 控制 。 所 以 ， 有 可 能 设置 了 enableHighAccuracy 为 true 的 
getCurrentPosition() 会 失败 ， 但 是 设置 enableHighAccuracy 为 false 的 却 会 成 功 。 

(2) timeout: 可 选 值 ， 表 示 应 用 程序 获取 位 置信 息 的 一 个 等 竺 时间， 以 坚 秒 为 单位 。 这 
个 计时 器 在 用 户 同 总 计算 位 置 之 后 才 会 开始 倒计时 ， 并 不 是 对 用 户 计 时 ， 而 是 对 网 络 计时 。 
如 琳 在 该 时 间 内 未 获得 位 置信 息 ， 则 返回 错误 。 

(3) maximumAge: 表示 对 地 理 位 置信 息 进行 缓存 的 有 效 时 间 ， 蛙 位 为 量 秒 。 例 如 ， 妆 
maximumAge 设置 为 180000 (Imin 是 60000)， 帮 第 一 次 调用 getCurrentPosition0) 获 取 位 置信 
县 的 时 候 ， 用 户 同意 了 ， 则 在 上 午 10:00 的 时 候 成 功 获取 用 户 的 位 置信 息 。2min 之 后 ， 也 就 
是 10:02 的 时 候 ， 再 一 次 调用 getCurrentPositionO: 








PositionOptions 对 象 。 这 个 对 象 有 三 个 



































function getLocation(){ 
if(navigator.geolocation) { 
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var options = {maximumAge:180000}; 
navigator.geolocation.getCurrentPosition(sucessCurrentPosition, errorHandler, options); 
y else { alert("HTMLS Geolocation is not supported! "); j 


} 
此 时 ， 设 备 不 重复 计算 用 户 的 当前 位 置 了 ， 会 二 接 返 回 第 一 次 获得 的 结 末 : 相同 的 经 纬 
度 ， 相 同 精度 ， 并 且 是 相同 的 时 间 惟 《上午 10:00)。 如 果 超 过 了 这 个 时 间 ， 绥 存 的 地 理 位 置 
就 会 被 废 齐 ， 将 答 试 重新 获得 用 户 位 置信 息 。 如 果 maximumAge 设置 为 0， 则 无 条 件 地 答 试 
FOSSIL BC le 














13.3 ”持续 获取 位 置信 息 














持续 获取 位 置信 息 古 指 当 用 户 移 动 的 时 候 ， 不 断 地 监视 退 躁 用户 的 位 置信 息 。 这 一 功能 
可 以 通过 watchPosition0) 方 法 实现 。watchPosition0) 方 法 描述 如 下 : 


watchPosition(PositionCallback successCallback, optional PositionErrorCallback errorCallback, 


optional PositionOptions options); 


watchPosition0 方 法 的 三 个 参数 和 getCurrentPosition() 7; 3 w 45 — TE, ^ [RH] B Æ 
watchPosition() 77 7; FH 2K F3: 3X BUM P 24 Bi E] HR UB Ef s E B Eg — FEES] ZA 
用 户 的 位 置 ， 只 要 发 生变 化 ， 浏 览 器 束 会 触发 watchPosition0 方 法 。 触 发 成 功 则 调用 
successCallback() 获 取 当 前 用 户 位 置信 息 ， 奋 则 触发 errorCallback0 人 返回 错误 代码 。 

另外 与 getCurrentPosition0 方 法 不 同 的 地 方 束 是 watchPosition0) 方 法 有 返回 值 。 类 似 于 延 
XR PR ZU TRIES ER. (setTimeout/setInterval) 那样 ， 返 回 一 个 ID ， 可 以 被 清除 挥 。 如 果 项 望 集 
止 对 用 户 位 置 改变 的 观察 ， 则 需要 调用 clearWatch() 方 法 。 该 方法 接受 一 个 watchPosition()77 
法 返回 的 了 P， 功 能 是 清除 对 用 户 位 置 的 循环 监视 。 代 码 如 下 : 














代码 清单 13-4: watchPosition() 方 法 与 clearWatch() 方 法 的 使 用 
<!DOCTYPE HTML> 
<html> 
<head> 
«script type="text/Javascript"> 
var watchID; 
var geoLoc; 
function getLocationUpdate(){ 
if(navigator.geolocation){ 
var options = {timeout:60000}; 
geoLoc = navigator.geolocation; 
watchID — geoLoc.watchPosition(showLocation, errorHandler, options); 
Yelse{ alert("Sorry, browser does not support geolocation!"); } 
j 
function stopWatch() | geoLoc.clearWatch(watchID); } 
function showLocation(position) 
var latitude — position.coords.latitude; 
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var longitude = position.coords.longitude; 
alert("Latitude : " + latitude + " Longitude: " + longitude); 


j 

function errorHandler(err) 1 ------------ 省 略 错误 处 理 代 人 码 --------- 
</script> 
</head> 
<body> 


<input type="button" onclick-"getLocationUpdate();'" value="Watch Update" /> 
<input type="button" onclick-"stopWatch();" value="Stop Watch" /> 

</body> 

</html> 


| 13.4 在 Google Map 中 显示 位 置 


在 Google Map 中 显示 地 理 位 置信 息 在 实际 的 网 络 开 发 中 十 分 普 届 ，Google Map 将 
Geolocation 内 置 到 了 用 户 界面 中 。 开 发 人 员 也 可 以 实现 同样 的 功能 ， 为 了 在 Google Map 中 
显示 结果 ， 需 要 访问 一 个 可 以 处 理 经 纬度 的 地 图 服务 ， 根 据 获 得 的 纬度 与 丝 度 ， 很 容易 将 用 
户 的 位 置 在 Google Map 中 显示 出 来 。 代 人 码 如 下 : 

















代码 清单 13-5: 在 Google Map 中 显示 位 置 
«IDOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width,initial-scale=1" /> 
<title> 在 Google Map 中 显示 位 置 </title> 
«script type-"text/javascript" src-"http://maps.google.com/maps/api/js?sensor-true"^«/script^ 
«script type-"text/javascript" 
var watchID - null; 
function handlerSuccess(position)( 
/获取 当前 位 置信 县 
var latitude = position.coords.latitude; 





var longitude — position.coords.longitude; 

var title=" 你 当前 的 位 置 ": 

// 地 图 中 心 坐标 

var latlng = new google.maps.LatLng(latitude,longitude); 





var myOptions = { zoom: 16, mapTypeld: google.maps.MapTypeId.ROADMAP center:latlng }; 
var map = new google.maps.Map(document.getElementById(map"),myOptions); /生成 地 图 

var infowindow = new google.maps.InfoWindow({ content: title }); — // 创 建 地 图 信息 窗口 

// 创 建 地 图 标记 

var marker = new google.maps.Marker({ position: latIng, title : title, map: map }); 
google.maps.event.addListener(marker,'mouseover',function() { infowindow.open(map,marker); 1); 
google.maps.event.addListener(marker,'mouseout',function() { infowindow.close(); )); 


j 


function handlerError(err) 1 
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switch(err.code) ( 
case 0: 
alert("Error:"--err.message); 
break; 
case 1: 
alert("Error: Access is denied!"); 
break; 
case 2: 
alert("Error: Position is unavailable!"); 
break; 
case 3: 
if( 'watchID) navigator.geolocation().clearWacth(watchID); 
alert("Error: TimeOut!"); 
break; 


} 


if(navigator.geolocation){ 
navigator.geolocation.getCurrentPosition(handlerSuccess,handlerError); 
watchID = navigator.geolocation.watchPosition(handlerSuccess,handlerError); 
Yelse{ alert("Sorry, browser does not support geolocation!"); } 

</script> 

</head> 

<body> 

<div 1d="map" style="width:500px; height:350px; border:ridge"></div> 

</body> 

</html> 





代码 在 Chrome 中 的 显示 效果 如 图 13-3 所 示 。 
让 使 用 Geoloeation 定 位 当前 位 > 
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图 13-3 在 Google Map 中 显示 位 置 


128 


第 14 章 通信 应 用 


| 14.1 PostMessage 


ET RJ SRI. JavaScript 路 域 访 问 一 直 是 令 开 发 人 员 硕 为 玉手 的 问题 。 出 于 安 
全 考 夸 ， 运 行 在 同一 浏览 右 中 的 框架 、 标 签 页 、 窗 口 之 间 的 通信 一 直 受 到 严格 的 控制 。 例 
如 ， 在 浏览 堪 内 部 共享 信息 对 茶 些 站 点 可 能 比较 方便 ， 但 是 却 增 加 了 受 亚 意 攻 击 的 可 能 性 。 
因此 浏览 器 厂商 合理 地 限制 了 此 类 的 访问 。 可 是 ， 在 现实 中 存在 着 让 不 同 站 点 的 内 容 在 浏览 
髓 内 进行 交互 的 需求 。 

为 了 满足 上 述 需 求 ， 浏 览 器 厂商 与 标准 机 构 引 入 了 器 文档 消 居 通信 机 制 。 不 仪 同 源 ( 域 
+ 闪 口 号 ) 的 页 和 面 之 间 可 以 互相 通信 ， 甚 全 可 以 实现 跨 域 通信 。 


14.1.4 HgS cd ERU 


HTMLS 中 引入 了 postMessage API 实现 同 源 〈 域 + 端口 号 ) 的 页 面 之 间 与 跨 域 的 通信 。 
在 调用 postMessage 之 前 ， 首 先 要 检测 浏 拓 亏 是否 文 持 它 。 检 测 方法 如 下 : 


















































代码 清单 14-1: 浏览 器 支持 性 检测 
if(typeof window.postMessage--undefined)| 
alert("HTMLS postMessage is not supported!"); 
:else1 alert("HTMLS postMessage is supported!"); | 


14.1.2 ”发 送 与 监听 

1. 发 送信 息 

跨 文 档 消息 通信 可 以 确保 iftfame、 标 签 页 、 窗 口 间 安 全 地 进行 跨 源 通信 。 要 想 实现 这 些 
通信 ， 首 先 要 设置 发 送 源 。 可 以 通过 postMessage 问 其 他 窗口 友 送 信息 ， 格 式 如 下 : 

otherWindow.postMessage(message, targetOrigin); 

(1) otherWindow: 要 友 送 窗口 的 对 象 引用 。 

(2) message: 被 发 送 到 其 他 窗口 的 数据 。 

(3) targetOrigin: 接收 消息 的 对 象 寄 口 的 URL 地 址 。 

2. 监听 消息 事件 

要 想 接 收 其 他 窗口 发 过 来 的 数据 信息 ， 束 必须 对 窗口 的 对 象 message 事件 进行 监听 。 代 
fad F: 














window.addEventListener("message", receiveMessage, false); 
function receiveMessage(event) 1 
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if (event.origin !== " targetOrigin") 
return; 
} else{ processMessage(e.data); } 


function processMessage(message) { .............. j 


data 属性 是 发 送 方 传递 的 实际 信息 ; origin 属性 是 发 送 源 ， 用 来 判断 信息 源 是 否 可 靠 。 
如 果 信息 源 不 可 徘 ， 则 对 其 进行 忽略 处 理 。 














14.1.3 ”创建 postMessage 应 用 


下 面 通过 一 个 实例 说 明 如 何 使 用 postMessage 实现 跨 文 档 通 信 。 在 该 实例 中 ， 实 现 了 主 
页 面 与 主页 和 面 内 的 iframe 子 页 面 之 间 的 互相 通信 。 主 页 面 问 iframe 子 页 面 友 送信 息 ， 并 在 
iframe F HMHR; iframe 子 页 耐 问 主 页 和 面 友 送信 息 ， 在 主页 面 弹出 友 送 来 的 “信息 提 
未 ”对 话 框 。 实 例 效 来 如 图 14-1 所 示 。 实 例 中 14-2.html 与 14-3.html 负面 分 别 配置 在 不 同 
的 域 中 ， 实 现 跨 文 档 通 信 。 























| a http: //bbs. com: 8000 
€ Q | (D bbs. con: 8000/14-2. hi T ` 


+A: http://bbs. con: 8000 


EX pst | 


iframe 窗 口 : http://abc.net:8000 
主页 面 必 送 来 的 信息 人 自我 中 华 ! 





图 14-1 跨 文 档 通 信和 实例 效果 


代码 清单 14-2: 主页 面 代 码 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>http://bbs.com:8000</title> 
<script> 
var targetOrigin = "http://abc.net:8000"; 
function messageHandler(e) { 

if (e.origin == targetOrigin) { 

alert(" 从 "+e.origin+" 传 来 的 信息 : "+e.data); 
} else { 
// ignore messages from other origins 


} 


function sendString(str) { 
window.frames[0].postMessage(str, targetOrigin); 
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//document.getElementById("widget").contentWindow.postMessage(str, targetOrigin); 

j 

function sendStatus() 1 
var statusText = document.getElementById("statusText").value; 
sendString(statusText); 

j 

function loadDemo() 1 
document.getElementById("sendButton").addEventListener("click", sendStatus, true); 
sendStatus(); 

j 

window.addEventListener("load", loadDemo, true); 

window.addEventListener("message", messageHandler, true); 

</script> 

</head> 

<body> 

主页 面 : http://bbs.com:8000<br/> 

«input type="text" 1d="statusText" > 

«button id="sendButton"> 发 送 人 至 abc.net</button> 

«p» <iframe  id-"widget" | width-"340" height-"160" | src-"http://abc.net:8000/14-3.html" 

></iframe></p> 

</body> 


代码 清单 14-3: iframe 窗口 代码 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>iframe 窗口 </title> 
<script> 
var targetOrigin = "http://bbs.com:8000"; 
function messageHandler(e) { 
if (e.origin === "http://bbs.com:8000") { 
document.getElementById("info").textContent = e.data; 
} else { // ignore messages from other origins | 
j 
function sendInfo(str) { window.top.postMessage(str,targetOrigin); } 
function loadDemo() 1 
document.getElementBylId("actionButton").addEventListener(" click", 
function() { 
var messageText = document.getElementById("messageText").value; 
sendInfo(messageText); 
}, true); 
j 
window.addEventListener("load", loadDemo, true); 
window.addEventListener("message", messageHandler, true); 
</script> 
</head> 
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<body> 
iframe 窗口 : http://abc.net:8000<br/> 
<p> 主 页 面 发 送 来 的 信息 : «strong id="info"></strong> «p» 
<div> 

«input type="text" 1d="messageText"> 

«button id-"actionButton" 7 3X F bbs.com«/button- 
</div> 
</body> 








运行 本 实例 需要 两 个 条 件 : BE AE Web IRERE; 第 二 是 两 个 页 耐 必 
须 来 目 不 同 的 域 。 

下 和 面 以 在 本 地 计算 机 右上 部 敬 进 行 说 明 ， 步 又 如 下 : 

(1) 更 新 Windows 系统 的 hosts 文件 ， 文 件 位 于 CAWINDOWS\system32\drivers\ete 目录 
下 (XP 系统 )。 打 开 hosts 文件 ， 在 该 文件 中 增加 以 下 两 条 记录 : 


127.0.0.1 abc.net 
127.0.0.1 bbs.com 





(2) 安装 Python (Python 中 含有 一 个 simpleHttpServer Web 服务 器 )。 
(3) 打开 实例 所 在 目录 ， 局 动 SimpleHttpServer Web 服务 器 。 
(4) 打开 浏览 器 ， 在 地 址 栏 输入 : http;//bbs.com:8000/14-2.html (CERA mi 7j 8000). 


| 14.2 Server-Sent Events 


HUX, HTTP 协议 都 是 严格 遵循 Request-Response 模型 的 。 客 户 疹 发 送 一 个 Request 
PREA REAA Request 作出 啊 应 并 将 Response 发 送 回 客户 病 。 也 吏 是 说 ， 所 有 的 互动 
都 是 由 客户 端 发 起 的 ， 服 务 器 不 会 发 起 任何 互动 。 这 种 请 求 /回复 的 模式 如 图 14-2 所 示 。 

















图 14-2 基本 工作 模式 


在 HIMLS 中 ，Server-Sent Events 打破 这 种 Request-Response 模型 的 限制 。 这 个 新 特性 
人 允许 服务 器 更 方便 地 主动 发 送信 息 给 浏览 器 。 
14.2.1 Xi 28 Sc dr PERS 


由 于 浏览 器 文 持 程度 各 有 不 同 ， 在 使 用 HTMLS Server-Sent Events 之 前 ， 首 先 要 确认 浏 
览 噩 是 否 文 持 。 如 果 不 文 持 ， 可 以 提供 一 些 代 和 登 的 提示 信息 。 例 如 提醒 用 户 升级 浏览 器 。 文 
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持 性 检测 代 公 如 下 : 


代码 清单 14-4: 浏览 器 支持 性 检测 
if(typeof( EventSource)!—-"undefined") ( 
alert("OK, your browser supports server-sent events !"); 
Yelse{ alert("Sorry, your browser does not support server-sent events !"); } 


14.2.2 Server-Sent Events API 











Server-Sent Events 规范 定义 了 API 来 打开 一 个 HTTP 链接 ， 通 过 该 链接 能 够 获取 从 服务 
器 推送 的 通知 。 格 式 如 下 : 


var source = new EventSource(GetTime.aspx'); 
source.onopen = function (event) { 
document.getElementBylId('result).innerH TML += 'Connection Opened.<br>'; 
J; 
source.onerror = function (event) { 
if (event.eventPhase == EventSource. CLOSED) ( 
document.getElementBylId('result).innerH TML += 'Connection Closed.<br>'; 


和 
source.onmessage = function (event) { 
document.getElementBylId('result).innerHTML += event.data + '<br>'; 


y 


TNI DELE]: 

(1) 创建 一 个 EventSource 对 象 ， 并 指定 页 面 的 URL 发 送 更 新 。 

(2) 当 每 次 收 到 新 的 事件 数据 时 ，onmessage 事件 处 理 器 会 被 调用 。 

(3) 当 onmessage 事件 发 生 时 ， 接 收 的 数据 被 放 入 id="result" 的 元 素 中 ， 用 于 显示 在 页 
面 中 。 


14.2.3 ”服务 状 端 代码 设置 

如 采 需 要 使 上 述 代 人 码 工作 ， 需 要 一 人 台 服 务 器 能 够 友 送 数据 更 新 《如 PHP 或 ASP)。 服 务 
器 端的 事件 流 的 语法 很 简单 ， 即 设置 “ContentType” 到 “"textevent-stream” 的 凑 。 设 置 方 
法 如 下 : 

ASP.NET 代码 如 下 : 














<% 
Response.ContentType="text/event-stream" 
Response.Expires=-1 

Response. Write("data: " & now()) 
Response.Flush() 


VA 


PHP 代码 如 下 : 
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<?php 

header('Content-Type: text/event-stream'); 
header('Cache-Control: no-cache'); 

$time = date('r"); 

echo "data: The server time is: {$time }\n\n"; 
flush(); 


?> 


TNI WHH: 

(1) 设置 “ContentType” 到 “"textevent-stream” 的 头 。 

(2) 事件 流 不 应 该 被 缓存 。 在 PHP 中 将 Cache-Control 设置 为 no-cache; 在 ASP 中 通过 
将 Response.Expires 的 值 设置 为 -1 来 禁用 绥 存 。 

(3) 实时 显示 处 理 过 程 的 状态 信息 。 


14.2.4 创建 Server-Sent Events 应 用 


Server-Sent Events 能 够 从 服务 器 到 客户 闫 进行 单 问 数据 发 送 。 在 前 面 的 内 容 中 辐 读 者 介 
7H f Server-Sent Events 的 一 些 基 本 概念 。 下 面 通 过 构建 一 个 基于 ASPNET 的 Server-Sent 
Events 应 用 来 说 明 如 何 使 用 Server-Sent Events。 实 例 效果 如 图 14-3 所 示 。 











Ë Server Sent Events 


- > @ |[ localhost:9499/ServerSentEvent: yr 


Connection Üpened. 
2012/8/6 15:50:00 
2012/87/6 15:50:01 
| 2012/87/6 15:50:02 
2012/876 15:50:03 
2012/8/6 15:50:04 





图 14-3 HRI s im 3130s 2C R 
1. 创建 客户 端 代码 
首先 在 Visual Studio 2010 中 创建 一 个 Web 项 目 ， 并 将 默认 的 default.aspx 重 命名 为 14- 
$.aspx。 然 后 设置 14-5.aspx 中 的 HTMLS 的 代码 。 


代码 清单 14-5: 设置 客户 端 代 码 

<IDOCTYPE html» 
<html> 
<head id="Head1" runat="server"> 

<title>Server Sent Events</title> 

«script type="text/Javascript"> 

function init() { 
if (window.EventSource == undefined) { 
document. getElementByld('result').innerHTML = "Your browser doesn't support Server 

Side Events.": 
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return; 
j 
var source = new EventSource('14-5.aspx'); 
source.onopen = function (event) { 
document.getElementById('result).innerHTML += 'Connection Opened.<br> '; 
中 
source.onerror = function (event) { 
if (event.eventPhase == EventSource. CLOSED) 1 
document.getElementBylId('result).innerHTML += 'Connection Closed.<br>'; 
j 
Dt 
source.onmessage = function (event) | 
document.getElementBylId('result).innerHTML += event.data + '<br>'; 
[m 
j 
</script> 
</head> 
«body onload-"init()" 
«form id="form1" runat="server"> 
<div id="result"> 
</div> 
</form> 
</body> 
</html> 


TNI WHH: 

ERME REAR D BU ,— E e RD OU Von EETA A Vids x HF Server- 
Sent Events 时 ， 将 初始 化 一 个 EventSource 对 象 。EventSource 代表 的 是 接收 事件 的 客户 端的 
终点 。 客 户 端 通过 创建 EventSource 对 象 来 打开 一 个 event stream。 创 建 EventSource 对 象 
时 ， 该 对象 接 收 一 个 事件 来 源 的 URL 作为 其 构造 函数 的 参数 。 最 初 请 求 服务 占 时 ， 将 触发 
onopen 事件 处 理 程 序 ， 如 果 连 接 被 天 闭 或 发 生 错 误 ， 将 触发 onerror 事件 处 理 程序 ， 当 每 次 
收 到 新 的 事件 数据 时 ， 将 触发 onmessage 事件 处 理 程 序 。 

2. 创建 服务 器 端 代码 

创建 一 个 新 的 Web 窗 体 ， 命 名 为 14-5.aspx。 在 Page Load 方法 中 设置 服务 器 端 要 推送 
的 数据 。 

代码 清单 14-6: 服务 器 端 推送 数据 代码 
DateTime startDate = DateTime.Now; 


Response.ContentType = "text/event-stream"; 
while (startDate.AddMinutes(1) > DateTime.Now) 


i 




















Response. Write(string.Format("data: (0j n", DateTime.Now.ToString())); 
Response.Flush(); 
System. Threading. Thread.Sleep(1000); 


j 
Response.Close(); 
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TNR EHE: 

自 先 设置 起 始 时 间 ， 这 个 时 间 啊 应 lmin 后 关闭 。 在 这 Imin 内 每 阳 1s 将 服务 占 时 间 推 
XS I| Ji o 

BE ER E VESU Vua —- HR rns m RA (UII ContentType《〈 内 容 类 型 ) 设置 为 
^text/event-stream". E While 条 件 语句 中 使 用 Response.Write 打印 输出 当前 时 间 到 页 面 。 注 
意 在 每 条 信息 前 面 的 “data”， 它 告诉 浏览 器 以 下 数据 是 一 种 服务 器 问 事件 ， 将 触发 
onMessage 的 JavaScript 事件 。 最 后 调用 Response.Flush， 告 诉 ASP.NET 实际 上 将 数据 发 送 
到 客户 问 ， 然 后 程序 休眠 ls， 以 免 每 一 秒 触发 多 个 事件 。 


| 14.3 WebSocket 


WebSocket API Z2 im- IRE a8] 2728 413. VAR THU T AAN TCP 套 接 字 ， 
使 用 ws 或 wss WW., aH TARZI mih ASET o 

WebSocket HYL HYI H AREEN Ar P KAR ARA [8] XR fei o AUE HI AA RENI V 
CMH. (ura KETA IEEE OR Tu). UXX. MRE. 


14.3.1 WebSocket API 


Web 开发 人 员 的 WebSocket JavaScript 2%) mtk O JE HJ, BÀ FÆ WebSocket 
JavaScript 接口 的 定义 : 























[Constructor(in DOMString url, optional In DOMString protocol)] 
interface WebSocket 1 
readonly attribute DOMString URL; 
// ready state 
const unsigned short CONNECTING - 0; 
const unsigned short OPEN = 1; 
const unsigned short CLOSED - 2; 
readonly attribute unsigned short readyState; 
readonly attribute unsigned long bufferedA mount; 
// networking 
attribute Function onopen; 
attribute Function onmessage; 
attribute Function onclose; 
boolean send(in DOMString data); 
void close(); 
È 
WebSocket implements EventTarget 


(1) URL: 代表 WebSocket 服务 占 的 网 络 地 址 ， 协 议 通 第 是 “ws”。 

(2) readyState: 通过 旋 取 readyState 的 属性 值 来 获取 WebSocket 对 象 状 态 。readyState 
值 包括 : CONNECTING (数值 为 0， 表 示 正 在 连接 )、OPEN (数值 为 1， 表 示 已 经 建立 连 
接 )、CLOSING“〈 数 值 为 2， 表示 正在 关闭 连接 )、CLOSED (数值 为 3， 表 示 已 天 闭 连 接 )。 
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(3) protocol: 协议 属性 。 初 始 时 协议 属性 必须 返回 空 字 符 串 。WebSocket 的 连接 建立 
后 ， 其 值 可 能 会 改变 。 

(4) send: 将 数据 发 运 到 服务 疾病 。 

(5) close: 关闭 连接 。 

除了 上 述 这 些 方法 与 属性 ， 还 有 一 些 很 重要 的 事件 ， 如 onopen. onmessage. onerror 以 


及 onclose。 


14.3.2. vili 2a Scd ERU 


由 于 浏览 器 的 支持 程度 各 有 不 同 ， 因 此 在 使 用 HTMLS WebSocket API 之 前 ， 需 首先 确 
认 浏 览 器 是 否 支持 。 如 果 不 支 持 ， 可 以 提供 一 些 代 替 的 提示 信息 。 人 例如， 提醒 用 户 升 级 浏览 
器 。 文 持 性 检测 代码 如 下 : 


























代码 清单 14-7: 浏览 器 支持 性 检测 
if (!'window. WebSocket){ 
alert("WebSocket is not supported by this browser"); 
} else{ alert(" WebSocket is supported by this browser"); } 


14.3.3 WebSocket API 使 用 方法 


webSocket 是 HTMLS JILA — HEAR, MIRRE RUE FP nd xe HJ IRI v E AT IT 
任意 时 刻 ， 相 互 推送 信息 。 

1. WebSocket 对 象 创建 与 连接 

WebSocket API 使 用 非常 简单 ， 要 进行 通信 和 连接， 只 需 创 建 一 个 新 的 WebSocket 对 象 ， 
并 且 提 供 URL 作为 参数 。 














var Socket = new WebSocket(url, [protocal] ); 


URL 必须 以 “ws” 或 “wss《〈 加 密 通 信 )” 协 议 名 作为 开头 ， 这 意味 看 一 个 websocket 连接 
URL 会 是 这 样 的 写法 : Ws://123.com:8080/webSocketServer。 注 意 “ws” 不 是 “http”， 所 以 传统 
的 web 服务 占 不 一 定 文 持 ， 需 要 服务 器 与 浏览 占 同 时 文 持 ，WebSocket 才能 正常 运行 。 

2. WebSocket 事件 

WebSocket 编程 亲人 循 异步 编程 模型 ， 即 打开 socket 不 需要 主动 同 服 务 嚣 发送 请 求 ， 只 需 
要 等 符 事 件 发 生 后 调用 它 的 回调 函数 。WebSocket 对 象 包括 三 个 事件 : open. close 和 
messages HEER, MR open 事件 ; 当 收 到 信息 时 ， 触 发 message 事件 ， 当 连接 关闭 
IN, f close 事件 。 


webSocket.onopen = function(evt) { alert("Connection open ...); }; 





























webSocket.onmessage = function(evt) 1 alert( "Received Message: " + evt.data); }; 


webSocket.onclose = function(evt) { alert("Connection closed."); 1; 


3. WebSocket 发 送信 息 
在 webSocket 打开 状态 中 ， 可 以 使 用 send. 也 数 推 送 数 据 到 server， 发 送 消息 后 ， 调 用 
close 方法 终止 连接 。 
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webSocket.send("Hello WebSockets!"); 


webSocket.close(); 


4. 前 端的 实现 


WebSocket 主要 包括 两 部 分 : WebSocket 客户 端的 实现 与 WebSocket 服务 器 端的 实现 。 


本 部 分 内 容 主 要 介绍 WebSocket 客户 端的 实现 。 


代码 清单 14-8: WebSocket 双向 通信 前端 代码 
«IDOCTYPE HTML> 
<html> 
<head> 
«script type="text/javascript"> 
function WebSocketTest() | 
if ("WebSocket" in window)1 
alert("WebSocket is supported by your Browser!"); 
/ 打开 web socket 
var ws = new WebSocket("ws://localhost:9998/echo"); 
ws.onopen = function()1 
// Web Socket 连接 上 , 用 send0 发 送 数据 
ws.send("Message to send"); 
alert("Message is sent..."); 
}; 
ws.onmessage = function (evt) { 
var received msg - evt.data; 
alert("Message is received..."); 
J; 
ws.onclose = function() { 
/ websocket 关闭 . 
alert("Connection is closed..."); 
}; 
} else{ 
// 浏览 器 不 文 持 WebSocket 
alert("WebSocket NOT supported by your Browser!"); 
j 
j 
</script> 
</head> 
<body> 
<div id="sse"> 
<a href-"javascript: WebSocketTest()"»Run WebSocket</a> 
</div> 
</body> 
</html> 


A 友情 提示 


如 果 测 试 上 述 代 码 ， 需 要 一 个 WebSocket 服务 器 。 


pywebsocket， 此 处 不 做 殴 述 。 
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第 15 章 使 用 Web Worker 处 理 线程 


在 HIMLS 中 提出 了 Web Worker 的 概念 ， 并 且 总 结 了 Web Worker 的 三 大 主要 特征 : 能 
够 长 时 间 运 行 〈《 啊 应 )、 理 想 的 局 动 性 能 以 及 理想 的 内 存 消耗 。Web Worker 允许 开发 人 员 编 
写 能 够 长 时 间 运 行 而 不 被 用 户 所 中 断 的 后 人 台 程 序 ， 去 执行 事务 或 者 思 辑 ， 并 同时 保证 页 面 对 
用 户 的 及 时 啊 应 。 这 样 使 Web 应 用 程序 具有 后 人 台 处 理 能 

Web Worker 是 一 段 JavaScript 脚本 ， 在 后 人 台独 立 于 其 他 脚本 执行 ， 不 影响 页 面 的 性 能 ， 
用 户 可 以 继续 执行 想 执 行 的 任何 操作 (如 点 击 、 选 择 等 )。 





























15.1 Web Worker API 


15.1.1 Dr Zioc dl Eh tr 
在 建立 Web Worker 之 采 应 肯 先 检查 当前 浏览 器 是 否 支 持 它 。 如 果 浏 览 器 支持 Web 
Worker API 的 话 ， 在 全 局 window 对 象 上 会 有 一 个 Worker 的 属性 ， 反 之 这 个 属性 值 会 是 


undefined. 

















代码 清单 15-1: 浏览 器 支持 性 监测 
function checkBrowser(){ 
if(typeof( Worker)!=="undefined") | 
alert(" Yes! Web worker is supported!"); 
} else{ alert("Sorry! No Web Worker is supported."); } 


j 
同样 地 ， 如 果 不 想 自己 杀手 去 写 这 个 检测 方法 的 话 ， 可 以 使 用 Modernizr 来 检测 浏览 器 
是 否 支 持 Web Worker. fU F: 





if( Modernizr. webworkers) | 
alert(" Yes! Web worker is supported!"); 


y else 1 alert("Sorry! No Web is Worker supported."); } 


15.1.2 ”构建 Web Worker 

Web Worker 初始 化 时 会 接受 一 个 JavaScript 文件 的 URL 地 址 ， 访 文件 中 包含 了 供 Web 
Worker 执行 的 代码 。 此 段 代 人 码 会 设置 事件 监听 器 ， 并 与 主页 产生 的 Worker 容 髓 进行 通信 。 
其 格式 如 下 : 





var worker = new Worker(demo.js'); 
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Worker MENERA Et — Atg] JavaScript 文件 资源 的 URL， 这 也 是 创建 专用 线程 时 
Worker 构造 函数 所 需要 的 唯一 参数 。 当 这 个 构造 函数 被 调用 之 后 ， 一 个 工作 线程 的 实例 便 会 
被 创建 出 来 。 


A 友情 提示 

如 果 存 在 指定 的 JavaScript 文件 ， 则 浏览 器 会 产生 一 个 新 的 Worker RA, HIFR. T 
则 将 返回 一 个 404 错误 。 
15.1.3 Web Worker 传递 信息 

Worker 与 其 父 网 页 之 间 的 通信 和 是 通过 事件 模型 和 postMessage0 方 法 实现 的 。 创 建 


Worker 之 后 ， 可 以 通过 调用 postMessage(0) 方 法 司 动 ， 它 可 以 接受 字符 串 或 JSON 对 象 作 为 单 
个 参数 。 调 用 方法 如 下 : 











worker.postMessage(message); 


为 了 在 页 面 主 程序 中 接收 从 专用 线程 传递 过 来 的 消息 ， 需 要 使 用 工作 线程 的 onmessage 
事件 处 理 器 ， 定 义 onmessage 的 实例 代码 如 下 : 








worker.onmessage-function(event) | ...... i» 


& 友情 提示 

1. 开发 人 员 也 可 以 选择 使 用 addEventListener 方法 ， 它 最 终 的 实现 方式 与 作用 和 和 
onmessage 相同 。 

worker.addEventListener('message', function(event) 1 ...... }, false); 


2. PostMessage 与 Communication API 中 的 postMessage API 都 支持 message 事件 。 


15.1.4. 终止 Worker 


当 一 个 Worker 对 象 被 创建 ， 它 将 持续 监听 消 县 《即使 外 部 脚本 执行 完毕 )， 直 到 它 被 终 
IE. (Web Worker 不 能 上 自行 终止 )。 可 以 调用 terminate0 方 法 来 实现 Worker 的 终止 ， 终 止 的 
Worker 将 不 再 啊 应 任何 信息 或 执行 任何 其 他 计算 。 终 止 之 后 ，Worker 不 能 重新 启动， 但 是 
可 以 使 用 同样 的 URL 创建 一 个 新 的 Worker. 














worker.terminate(); 


15.1.5 ”错误 处 理 


与 任何 JavaScript 逻辑 一 样 ， 你 需要 处 理 Web Worker 中 出 现 的 任何 错误 。 如 果 在 执行 
Worker 时 出 现 错误 ， 允 会 触发 ErrorEvent。 
interface ErrorEvent : Event 1 
readonly attribute DOMString message; /有 关 错 误 的 实用 说 明 
readonly attribute DOMString filename; /导致 错误 的 Worker 脚本 的 名 称 
readonly attribute unsigned long lineno; // 出 错 的 行 号 


m 
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下面 显示 的 是 Web Worker 的 JavaScript 文件 中 的 错误 处 理 函 数 ， 该 函数 将 错误 记录 在 控 
制 合 上 。 


worker.onerror = function (event) { console.log(event.message, event); ); 


15.1.6 ”加载 外 部 脚本 

由 于 Web Worker 没有 访问 document 对 象 的 权限 ， 所 以 可 以 通过 importScripts(). RROK: 
外 部 脚本 文件 或 库 加 载 到 Worker 中 。 该 方法 采用 零 个 或 多 个 字符 串 表 示 要 导入 的 资源 的 文 
件 名 。 














importScripts("script1.js"); 


多 个 文件 可 以 使 用 分 号 阳 开 。 注意 : JavaScript 文件 可 能 按 不 同 的 顺序 加 载 ， 但 执行 会 
按照 导入 的 顺序 执行 。 








"won" 


importScripts(" script .js", "script2.js"); 
也 可 以 写成 这 样 : 


importScripts("scriptl.js"); 
importScripts("script2.]s"); 


| 15.2 Worker 简单 操作 流程 


表面 已 说 过 ，Web Worker 会 在 后 台独 立 于 其 他 脚本 执行 ， 不 影响 页 面 的 性 能 ， 用 户 可 
以 继续 执行 想 执 行 的 任何 操作 。 

一 个 Worker 工作 操作 流程 包括 : 

(1) 浏览 锅 文 持 性 检测 。 

(2) 创建 worker 对 象 。 

(3) 构建 子 程序 (JavaScript 文件 )。 

(4) 在 页 面 主 程序 接收 从 专用 线程 传递 过 来 的 消息 〈 主 程序 构建 成 功 ， 呼 叫 子 程序 进行 
通信 ， 子 程序 通过 postMessage() 方 法 将 结果 传递 给 主 程序 )。 

(5) 触发 onmessage 事件 ， 接 收 子 程序 传递 过 来 的 信息 ， 进 行 相 关 处 理 。 

(6) 如 果 在 执行 Worker 时 出 现 错 误 ， 束 会 触发 ErrorEvent。 

整个 Worker 人 简单 工作 流程 ， 如 图 15-1 所 示 。 

Worker 线程 最 简单 的 应 用 就 是 用 来 做 后 台 计 算 ， 而 这 种 计算 并 不 会 中 断 前 台 用 户 的 
操作 。 

下 和 面 通 过 实现 一 个 累加 占 的 实例 ， 来 说 明 Worker 工作 的 简单 流程 。 在 这 个 例子 中 ， 
在 主页 面 中 创建 一 个 后 合 工作 线程 ， 并 且 同 这 个 工作 线程 分 配 累加 任务 ， 当 工作 线程 每 
次 执行 累加 任务 时 ， 都 会 癌 主 页 面 程序 返回 每 次 累计 计算 结果 ， 而 在 这 个 过 程 中 ， 主 页 
面 不 需要 等 竺 这 个 耗 时 的 操作 ， 可 以 继续 进行 其 他 行为 或 任务 。 实 例 效 果 如 网 15-2 
所 示 。 
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[] 15-2 


| € > C |[]localhost/abc/15-2.ht 5? 


执行 调用 的 子 程序 


如 Worker js 





JL ih A postMessage() count numbers: 19 


触发 |startCount | | stopCount 


worker.onmes $ugc 





进行 相关 处 理 


图 15-1 Worker 简单 操作 流程 图 15-2 Web Worker 实现 累加 器 








这 个 应 用 场景 分 为 两 个 主要 部 分 ， 一 个 是 主页 面 ， 可 以 包含 主 JavaScript 应 用 入 口 和 用 
户 其 他 操作 UI 等 ， 另 一 个 是 后 人 台 工 作 线 程 脚 本 《用 来 执行 累加 计算 任务 )。 


代码 清单 15-2: 设置 主页 代码 ， 并 在 主页 代码 中 创建 Worker 对 象 
<!doctype html> 
<html> 
<head> 
«script type="text/Javascript"> 
var worker; 
function startCount() 
if(typeof( Worker)!—-"undefined")( 
worker = new Worker("demo.js");//8)]& worker 对 象 
IF EL M UT s 
worker.onmessage = function (event) { document.getElementBylId("result").innerH TM L-event.data; ); 
:else1 alert("Sorry, your browser does not support Web Workers..."); } 
j 
function stopCount() | worker.terminate(); } /终止 worker 
</script> 
</head> 
<body> 
<p>count numbers: <output id="result"></output> </p> 
<input type="button" onclick-"startCount();" value="startCount"/> 
<input type="button" onclick-"stopCount();" value="stopCount"/> 
</body> 
«/html 





代码 清单 demo.js: 后 台 工 作 线 程 代码 ， 实 现 囚 加 器 效 末 。 


// JavaScript Document 
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var 170; 

function CountNum()( 
i=i+l; 
postMessage(1); 
setTimeout("CountNum()",500); 


j 
CountNum(); 


A 友情 提示 
如 条 调试 该 程序 ， 需 要 将 程序 部 普 到 Web 运行 环境 中 。 


| 15.3 ”使 用 Worker 线程 做 后 台数 值 计 算 


JavaScript 属于 单线 程 环境 ， 也 束 是 说 无 法 同时 运行 多 个 脚本 。 例 如 ， 假 设 有 一 个 网 
站 ， 它 需要 处 理 UI 事件 ， 查 询 并 处 理 大 量 API 数据 以 及 操作 DOM。 遗 憾 的 是 ， 由 于 受到 浏 
Wae JavaScript 运行 时 的 限制 ， 所 有 这 些 操作 都 无 法 同时 进行 。 脚 本 是 在 单个 线程 中 执行 
的 。 例 如 ， 当 执行 如 下 程序 ， 在 文本 框 中 输入 一 个 很 大 的 数值 时 〈 例 如 100 亿 )， 浏 览 器 会 
跳出 如 图 15-3 所 示 的 提示 “〈 因 浏览 器 而 异 )。 由 于 脚本 运行 时 间 过 长 ， 用 户 不 得 不 终止 当前 
的 操作 。 

















当前 页 面 的 其 个 腻 本 正 忙 ， 或 者 已 停止 响应 。 特 可 以 关 即 停止 该 腹地 ， 或 者 您 可 以 粥 绩 同等 待 该 脚本 
F S. 


Bi: file;///D:/96E796A896BF96EA96BB96B6/HTML5&CSS38 JavaScript96E596BC96B096ES 
958F959196E5968996BB96E59586958C /96E 795A 8968B96E596BASGSF9SGEA9GBB3OA 396E 7396/09681 
/15/15-3.html:12 


|] 不 再 询问 避 ) 








图 15-3 Firefox 中 脚本 运行 时 间 过 长 提示 


代码 清单 15-3: 主 程序 代码 
<!doctype html> 
<html> 
<head> 
«script type="text/Javascript"> 
function countNum()( 
var num-document.getElementById("inputNum").value; 
var input num-parseInt(num); 
var j-0; 
for(var 1=0;i<=input_num;i++){ jJ=j+1; } 
document.getElementBylId("result").innerHTML-j; 
j 
</script> 
</head> 
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<body> 

<p>count numbers:</p> 

<input id="inputNum" type="text"> 

<input type="button" onClick="countNum()" value="startCount"> 
</body> 
</html> 





HTML5 Web Worker API 可 以 将 耗 时 较 长 的 运算 在 后 台 执 行 ， 而 不 影响 页 面 的 性 能 。 用 
户 可 以 继续 执行 想 执 行 的 任何 操作 。 这 样 能 够 很 好 地 解决 大 运算 量 问题 。 可 以 按照 下 面 的 方 
式 将 代码 清单 15-3 设置 为 以 Web Worker 的 形式 进行 操作 。 








代码 清单 15-4: 主 程序 页 面 代码 
<!doctype html> 
<html> 
<head> 
«script type="text/Javascript"> 
var worker; 
if(typeof(Worker)!=="undefined"){ 
worker = new Worker("worker1.js");// 创 建 worker 对 象 
/设置 监听 器 
worker.onmessage = function (event) { document.getElementBylId("result").innerH TM L-event.data; }; 
:else1 alert("Sorry, your browser does not support Web Workers..."); } 
function startCount() ( 
var num-document.getElementById("inputNum").value; 
var input num-parseInt(num); 
worker.postMessage(input num); 
j 
</script> 
</head> 
<body> 
<p>count numbers: <output id="result"></output> </p> 
<input id="inputNum" type="text" > 
<input type="button" onclick-"startCount();" value="startCount"/> 
</body> 
</html> 





代码 清单 workerl.s: ILR DIKI Ja e NIB e 


onmessage = function (event) { 
for (var 1 = 0; i <= event.data; i += 1){ varj =1; } 


postMessage(]); 
j 


程序 在 Firefox 浏览 器 中 的 显示 效果 如 图 15-4 所 示 。 
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Firefox * 


AEA x kel 


< & localhost/abc/15-4.html 


i2) iiem | 动 MEDM LO 新 手 上 路 |o 常用 网 址 
count numbers: 10000000000 


10000000000 | startCount | 





图 15-4 大 数值 运算 结果 


| 15.4 Worker IRE 


Worker 的 API 能 够 在 Web Worker WIEP ge EH], LAGE T Worker. PENETRA] t 
Hj Worker REPRE. AEEY PEA Worker 对 象 ， 并 为 Worker 构造 函数 提供 
一 个 指 问 JavaScript 文件 (worker2.js〉 资 源 的 URL。 然 后 ， 在 Worker2.js 文件 中 构造 一 个 
Worker 对 象 ， 使 Worker WIRE KZE a] worker2 1.js 文件 。 




















代码 清单 15-5: 创建 线程 能 套 主 程序 
<!doctype html> 
<html> 
<head> 
«script type="text/Javascript"> 
var worker; 
if(typeof( Worker)!=="undefined"){ 
worker = new Worker("worker2.js");// 创 建 worker 对 象 
/设置 监听 器 
worker.onmessage = function (event) { document.getElementBylId("result").innerH TM L-event.data; ); 
:else1 alert("Sorry, your browser does not support Web Workers..."); } 
</script> 
</head> 
<body> 
<p>count numbers: <output id="result"></output> </p> 
</body> 
</html> 








代码 清单 15-5 为 实例 的 主 程序 ， 在 该 主 程序 中 创建 了 一 个 worker 对 象 ， 然 后 为 该 对 象 
提供 了 一 个 指 问 workerjs 的 URL. 
代码 清单 worker2.js: 主线 程 代码 
Var 1=3; 


var k-15; 


var n; 
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function ShowNum(){ 
i=i+k; 
var worker=new Worker("worker2 1.js");// 创 建 子 线程 
worker.postMessage(1); // 同 子 线程 传递 参数 
worker.onmessage=function(event) { postMessage(event.data); / /返回 结果 到 主 程 序 。} 





} 
ShowNumY(); 


代码 清单 worker2 1.js: 子 线 程 代码 


onmessage=function(event){ 
for (var i = 0; i <= event.data; i += 1){ var J=1; } 
postMessage(i); /将 运算 结果 返回 主线 程 。 
close(); 





HTMLS 中 的 Web Worker 可 以 分 为 两 种 不 同 的 线程 类 型 ， 一 个 是 专用 线程 Dedicated 
Worker， 一 个 是 共享 线程 Shared Worker。 两 种 类 型 的 线程 有 不 同 的 用 途 。 前 面 介 绍 的 均 为 
专用 线程 。 本 节 将 同 读 者 介绍 共享 线程 。 


15.5.1 创建 共 诗 线程 


创建 共享 线程 可 以 通过 使 用 SharedWorker() 构 造 函 数 来 实现 ， 这 个 构造 函数 使 用 
URL 作为 第 一 个 参数 ， 即 指 问 JavaScript 资源 文件 的 URL。 同 时 ， 如 果 开 发 人 员 提 供 
了 第 二 个 构造 参数 ， 那 么 这 个 参数 将 被 用 于 这 个 共享 线程 的 名 称 。 创 建 共享 线程 的 代 但 
如 下 : 








var worker = new SharedWorker('sharedworker.js', 'mysharedworker ' ); 


15.52. 与 共享 线程 通信 
共享 线程 的 通信 也 与 专用 线程 一 样 ， 是 通过 使 用 隐 式 的 MessagePort 对 象 实例 来 完成 
的 。 当 使 用 Shared Worker% it PR 39 的 时 候 ， 这 个 对 象 将 通过 一 种 引用 的 方式 被 返回 。 可 以 
通过 这 个 引用 的 port 瘦 口 属性 来 与 它 进行 通信 。 发 送 消 恩 与 接收 消 恩 的 代码 如 下 : 
CG) 从 器 口 接收 数据 ,包括 文本 数据 及 结构 化 数据 : 
worker.port.onmessage = function (event) 1 ...... I» 
(2) 问 端 口 发 送 普 通 文本 数据 : 


Worker.port.postMessager( ...... y 


(3) 回 端 口 发 送 结构 化 数据 : 








worker.port.postMessage( ( username: 'usertext'; live city: ['data-one', 'data-two', 'data-three','data-four' |); 
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在 上 述 代 人 码 中 ， 第 一 个 使 用 onmessage 事件 处 理 塔 来 接收 消息 ， 第 二 个 使 用 
postMessage 来 发 送 普通 文本 数据 ， 第 三 个 使 用 postMessage 来 发 送 结构 化 的 M 这 里 使 
用 了 JSON 数据 格式 。 


15.5.3 ”共享 线程 的 使 用 


1. 共享 线程 的 基本 操作 
本 实例 演示 了 创建 一 个 共享 线程 并 接收 从 连接 发 送 过 来 的 返回 结果 ， 然 后 在 主 程序 中 显 
示 返 回 结果 。 

















代码 清单 15-6: 共享 线程 用 户 连接 页 面 代码 
«script type="text/Javascript"> 
var worker = new SharedWorker( test.]s"); 
/注意 :不 是 worker.onmessage 而 是 worker.port.onmessage 
worker.port.onmessage = function(e) 1 alert(e.data); } 
</script> 


代码 请 单 test.js: 
onconnect = function(e) 1 
var port = e.ports[0]; 
port.postMessage('Hello World!; 
j 


2. 多 页 面 访问 线程 

本 实例 展示 如 何 实现 两 个 页 和 面 同时 连接 同一 个 worker。 在 实例 中 ， 主 页 面 与 主页 和 面 内 的 
iframe 子 页 面 同 时 连接 同一 个 worker。 这 与 两 个 完全 独立 的 页 面 连接 同一 个 worker 浏览 环境 
是 相同 的 。 实 例 效果 如 图 15-5 所 示 。 























[] 15-7 " | 
= 心 | 0 localhost/abc/15-7.htn 7? | ™ 








Result: RIF! 这 是 第 1 次 RIEF.. 


Inner Result :你 好 ! RERA E 


图 15-5 多 页 面 连接 worker 


代码 清单 15-7: 主页 面 程序 代码 
<!doctype html> 
<html> 
<head> 
«script type="text/Javascript"> 
var worker = new SharedWorker("sharedWorker.js"); /构造 SharedWorke 对 象 
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// 与 使 用 worker.port.onmessage = function(e) {....} 作 用 相同 。 
worker.port.addEventListener(" message", function(e){ 
document.getElementBylId("result").innerHTML += e.data;// MA m H Z1 2 8 

}, false); 
worker.port.start();/7: X: 在 使 用 addEventListener 时 需要 这 样 书 与 
worker.port.postMessage("..."); V 回 端口 发 送 数据 

</script> 

</head> 

<body> 
<p> <output id="result">Result:</output><br> </p> 
<iframe src="inner.html"></iframe>//#x A innerhtml 页 面 

</body> 

</html> 


代码 清单 inner.html: A E pim B inner.html 文件 代码 


<!doctype html> 
<html> 
<head> 
«script type="text/Javascript"> 
var worker = new SharedWorker("sharedWorker.]s"); 
worker.port.onmessage = function(e) { document.getElementBylId("result").innerHTML += e.data; | 
</script> 
</head> 
<body> 
«out id="result">Inner Result:</out> 
</body> 


</html> 


代码 清单 sharedWorkerjs: 处 理 信息 的 JavaScript 代码 


var count = 0; 
onconnect = function(e) { 
count += 1; 
var port = e.ports[0]; 
port.postMessage(" 你 好 ! 这 是 第 " + count OE f"); 
port.onmessage = function(e) { 
if(e.data="..."){ 
port.postMessage(e.data); 
}else{ port.postMessage("ping"); | 
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HTMLS 提供 了 一 个 应 用 程序 的 绥 存 机 制 ， 可 使 基于 Web 的 应 用 程序 离线 运行 。 开 发 人 
员 可 以 使 用 Application Cache API 来 指定 浏览 右 应 绥 存 哪些 文件 以 供 离 线 用 户 访问 。 即 使 用 
户 在 离线 状态 下 按 了 刷新 按钮 ， 应 用 也 会 正 篆 加 载 和 运行 。 


| 16.1 认识 Offline Web Application 


互联 网 迅猛 发 展 ， 己 经 占据 了 我 们 生活 的 一 部 分 。 无 论 是 工作 还 是 学 习 ， 对 网 络 的 依赖 
程度 都 越 来 越 强 。 人 们 倾 问 365 天 网 络 不 间断 ， 无 论 在 世界 哪个 角 洲 痢 海 望 互联 网 的 存在 。 但 
是 在 生活 中 经 常会 过 到 无 法 登录 互联 网 的 情况 ， 用 户 束 不 能 利用 这 些 Web 应 用 了 。 

HTML5 通过 application cache API 提供 离线 存储 功能 。 前 提 是 你 要 访问 的 Web 页 面 全 少 
馈 在 线 访问 过 一 次 。 

什么 是 离线 Web NH? 听 起 来 似乎 有 些 让 人 难以 理解 。 离 线 Web 应 用 其 实 是 一 个 URL 列 
表 文 件 。 列 表 中 的 URL 分 别 可 以 指向 HTML、JavaScript、CSS、 图 片 或 其 他 资源 ， 这 个 URL 
列表 文件 被 称 作 “manifestfilg” 清 单 文件 。 它 以 文本 文件 的 形式 存在 ， 可 以 放 在 服务 需 的 任何 
位 置 。 一 旦 应 用 了 离线 Web 应 用 ， 离 线 Web 应 用 的 首页 会 引入 清单 文件 。 如 采 你 的 浏览 器 文 持 
离线 Web 应 用 ， 束 会 从 清单 文件 中 读 取 URL 信息 ， 并 下 载 对 应 的 资源 ， 将 它们 绥 存 到 本 地 。 同 
时 保证 本 地 与 服务 器 资源 一 致 。 这 样 在 离线 的 情况 下 ， 直 接 恋 取 本 地 绥 存 的 资源 即 可 。 

使 用 绥 存 接口 可 为 Web 应 用 融 来 以 下 三 个 优势 : 

(1) 离线 浏览 : 用 户 可 在 离线 时 浏览 完整 的 网 站 。 

(2) 速度 : 绥 存 资源 为 本 地 资源 ， 因 此 加 载 速度 较 快 。 

(3) 服务 器 负载 更 少 : 浏览 器 只 会 从 发 生 了 更 改 的 服务 器 下 载 资源 。 













































































A 友情 提示 

本 地 缓存 与 浏览 器 缓存 是 有 着 本 质 的 区 别 的 。 首 先 ， 本 地 缓存 为 整个 Web 应 用 服务 ， 
而 浏览 器 缓存 只 是 针对 单个 页 面 服务 的 。 其 次 ， 本 地 缓存 是 可 靠 的 ， 可 以 控制 对 哪些 内 容 进 
行 缓 存 。 浏 览 器 缓存 机 制 不 够 可 靠 ， 可 能 并 不 会 按 你 希望 的 方式 运行 ， 我 们 不 知道 浏览 器 到 
底 缓存 了 哪些 网 页 。 


| 16.2 manifest 文件 


16.2.1 引用 清单 文件 
为 了 启动 应 用 组 在， 需要 在 document 的 html 中 添加 manifest 属性 : 
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<!DOCTYPE HTML> 


<html manifest="demo.manifest"> ...... </html> 


4E ERAI P NAHARA EAAS manifest 属性 。 如 果 网 页 不 包含 manifest JE 
性 ， 则 不 会 缓存 该 网 页 (除非 manifest 文件 中 明确 列 出 了 该 属性 )。 





2 友情 提示 
清单 文件 必须 以 text/cache-manifest MIME 类 型 提供 。 例 如 ， 要 在 Apache 中 提供 MIME 
类 型 ， 请 在 你 的 配置 文件 中 添加 下 面 一 行内 容 : 


text/cache-manifest .appcache 


Python 标准 库 中 的 SimpleHTTPServer 模块 对 扩展 名 为 “.manifest” 的 文件 配置 头 部 信 
息 ， 配 置 方法 为 打开 PYTHON HOMEBE/Lib/mimetypes.py 文件 ， 并 添加 如 下 的 代码 : 


' manifest':'text/cache-manifest manifest, 


16.2.2 ”清单 文件 结构 


manifest 文件 是 一 个 简单 的 文本 文件 ， 可 告诉 浏览 器 该 缓存 什么 内 容 〈 或 者 不 缓存 什么 内 
容 )。 下 面 通过 一 个 manifest 文件 示例 来 对 manifest 文件 做 详细 介绍 ，manifest 文件 代码 如 下 : 








CACHE MANIFEST 
# 2012-08-18 
#version 8 

# 明确 绥 仓 的 主 项 
CACHE: 

index.html 
stylesheet.css 
images/logo.png 
scripts/main.js 

# 指 定 不 缓存 在 本 地 的 资源 文件 . 
NETWORK: 
login.asp 
FALLBACK: 

/html5/ /offline.html 


manifest 文件 包含 下 面 三 个 部 分 ， 这 些 部 分 可 按 任 总 顺序 排列 。 并 且 每 个 部 分 均 可 在 同 
一 清单 中 重复 出 现 。 

(12 CACHE: 在 这 个 列表 标题 下 的 文件 将 会 在 下 载 后 被 缓 存 。 

(2) NETWORK: 在 这 个 列表 标题 下 的 文件 将 要 求 连 接 到 服务 问 ， 而 不 会 进行 缓存 。 

(3) FALLBACK: 在 这 个 列表 标题 下 的 文件 如 果 不 能 访问 ， 则 指定 特定 的 fallback 
页 面 。 
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在 manifest 文件 中 ， 第 一 行 必须 为 CACHE MANIFEST 字符 串 ， 且 必 不 可 人 少 。 它 把 文件 
的 作用 告诉 浏览 器 。 以 “#” 开 头 的 行 是 注释 行 ， 但 也 可 用 于 其 他 用 途 。 


CACHE: 





index.html 
stylesheet.css 
images/logo.png 
scripts/main.]s 
以 上 manifest 资源 文件 包含 了 4 个 资源 : 一 个 html 文件 、 一 个 CSS 文件 、 一 个 png X 
件 、 还 有 一 个 js 文件 。 当 这 个 manifest 文件 加 载 后 ， 浏 览 右 将 会 从 服务 噩 根 目 录 下 载 这 4 个 
文件 ， 一 旦 不 能 访问 互联 网 时 ， 资 源 仍旧 可 以 被 访问 。 


NETWORK: 





login.asp 
NETWORK 部 分 指定 了 文件 “login.asp” 将 永远 不 需要 缓存， 所 以 离线 不 可 用 。 一 个 星 
号 表示 所 有 的 其 他 资源 或 者 文件 需要 一 个 互联 网 连接 ， 例 如 : 


NETWORK: 


* 





FALLBACK 部 分 指定 了 offline.html. 文件 将 会 在 无 法 访问 互联 网 的 情况 下 蔡 代 所 有 的 
/html5/ 下 的 文件 。 


FALLBACK: 
/html5/ /offline.html 


FALLBACK 中 每 行 可 以 指定 两 个 文件 资源 文件 ， 第 一 个 资源 文件 为 能 够 在 线 访问 时 使 
用 的 资源 文件 ， 第 二 个 资源 文件 为 不 能 在 线 访问 时 使 用 的 备用 资源 文件 。 








16.3 ”在 线 状态 检测 




















HTMLS 提供 了 一 些 独 方法 ， 用 来 检测 应 用 程序 是 否 正 党 连接。 是 侍 处 于 正当 连接 状态 ， 可 以 
通过 window.navigator 对 象 的 属性 进行 判断 。 当 用 户 没 有 进行 正常 的 网 络 连 接 时 ，navigator.onLine 
将 返回 falses FWRI trues FARRE 16-1 演示 了 如 何 查 看 页 面 状 态 是 在 线 还 是 离线 。 





代码 清单 16-1: 浏览 器 状态 检测 
<!doctype html> 
<html> 
<head> 
«script type="text/Javascript"> 
function updateIndicator() { 
document.getElementBylId('indicator').textContent = navigator.onLine ? 'online' : 'offline'; 


j 
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</script> 
</head> 


LM 


«body onload-"updateIndicator()" ononline-"updateIndicator()" onoffline-"updateIndicator()" 


«p? The network is: «span id="indicator">(state unknown)«/span^ 
</body> 
</html> 


| 16.4 Application cache API 


16.4.1 HgS Scd ERU 


在 使 用 离线 Web 应 用 时 ， 应 首先 检测 当前 浏览 器 是 否 文 持 它 。 代 码 清单 16-2 演示 了 离 
线 Web 应 用 的 检 训 方法 。 





代码 清单 16-2: 离线 Web 应 用 浏览 器 支持 检测 
if(window.applicationCache) 
alert("OK,Your Browser Supports....."); 
:else1 alert("Sorry, Your Borser does not Support!"); } 


16.4.2 ApplicationCache 对 象 


HTMLS 浏览 器 提供 了 一 个 新 的 对 象 window.applicationCache, Hj T 42 ££ H. 
ApplicationCache API 描述 如 下 : 








interface ApplicationCache : EventTarget { 
// update status 
const unsigned short UNCACHED = 0; 
const unsigned short IDLE = 1; 
const unsigned short CHECKING = 2; 
const unsigned short DOWNLOADING = 3; 
const unsigned short UPDATEREADY = 4; 
const unsigned short OBSOLETE - 5; 
readonly attribute unsigned short status; 
// updates 
void update(); 
void abort(); 
void swapCache(); 
// events 
| TreatNonCallableAsNull] attribute Function? onchecking; 


[TreatNonCallableAsNull] attribute Function? onerror; 
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TreatNonCallableAsNull] attribute Function? onnoupdate; 


TreatNonCallableAsNull] attribute Function? ondownloading; 


TreatNonCallableAsNull] attribute Function? onupdateready; 
TreatNonCallableAsNull] attribute Function? oncached; 


m m rp orm T T 


] 
] 
TreatNonCallableAsNull] attribute Function? onprogress; 
] 
] 
] 


TreatNonCallableAsNull] attribute Function? onobsolete; 
j; 
1. 缓存 状态 
window.applicationCache 对 象 有 一 个 数值 型 属性 window.applicationCache.status， 该 属性 
代表 了 绥 存 状态 。 绥 存 状态 共有 六 种 ， 见 表 16-1。 


表 16-1 缓存 状态 
数值 型 属性 缓存 状态 数值 型 属性 B dEGRGS 


0 UNCACHED (HÆF) DOWNLOADING (下 载 中 ) 
1 IDLE (FW) UPDATEREADY (更 新 就 绪 ) 
2 CHECKING (检查 中 ) OBSOLETE (过 期 ) 


2. 事件 
ApplicationCache 对 象 包括 了 八 个 事件 ， 见 表 16-2。 


表 16-2 事件 列表 


E 1 Wh A AT 
用 户 代理 检查 更 新 或 者 在 第 一 次 尝试 下 载 manifest 文件 的 时 候 ， 本 事件 往往 是 事件 队 





AIRE 列 中 第 一 个 被 触发 的 

noupdate Event 检测 出 manifest 文件 没有 更 新 

downloading Event 用 户 代 理发 现 更 新 并 且 正 在 取 资 源 ， 或 者 第 一 次 下 载 manifest 文件 列表 中 列举 的 资源 
progress ProgressEvent 用 户 代 理 正在 下 载 资源 manifest 文件 中 的 需要 缓存 的 资源 








manifest 中 列举 的 文件 已 经 重新 下 载 并 更 新 成 功 ， 接 下 来 js 可 以 使 用 swapCache0 方 法 
更 新 到 应 用 程序 中 
obsolete Event manifest 的 请 求 出 现 404 或 者 410 错误 ， 应 用 程序 缓存 被 取消 
manifest 的 请 求 出 现 404 或 者 410 错误 ， 更 新 缓存 的 请 求 失败 
manifest 文件 没有 改变 ， 但 是 页 面 引 用 的 manifest 文件 没有 正确 地 下 载 
在 取 manifest 列举 的 资源 的 过 程 中 发 生 致 命 的 错误 
在 更 新 过 程 中 manifest 文件 发 生变 化 


updateready Event 








Error Event 


cached manifest 中 列举 的 资源 已 经 下 载 完 成 ， 并 且 已 经 绥 存 


下 面 通过 一 个 实例 进一步 说 明 Application Cache 事件 是 如 何 触发 的 。 

基体 步骤 如 下 : 

(1) 创建 一 个 名 为 16-3 的 html 页 面 ， 然 后 启动 应 用 缓存 〈 在 document 的 html. 中 添加 
manifest 属性 )。 


代码 清单 16-3: 页 面 的 基本 UI 结构 
<!doctype html> 
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<html manifest="demo.manifest"> 

<head> 

«script srec="status.js"></script> 

</head> 

«body onLoad='"inlt()"> 
<h2>Application Cache 事件 流程 </h2> 
«p id="info"></p> 

</body> 

</html> 





(2) 创建 statusjs 文件 ， 在 该 文件 中 检测 浏览 器 是 否 文 持 ApplicationCache 对 象 。 并 构 
建 浏览 右 与 服务 器 交互 过 程 中 触发 的 ApplicationCache 事件 。 
代码 清单 status.js: ApplicationCache 事件 流程 。 





if(window.applicationCache){ 
applicationCache.addEventListener('cached', function) { 
document. getElementById("info").innerHTML+=" Application cached<br/>"; 
}, true); 
applicationCache.addEventListener('checking',function( { 
document.getElementById("info").innerHTML--"Checking for application update<br/>"; 

j true); 

applicationCache.addEventListener('downloading', function) { 
document.getElementById("info").innerHTML-—"Downloading application update<br/>"; 

j true); 

applicationCache.addEventListener('error', function()( 
document.getElementById("info").innerHTML+=" Application cache error<br/>"; 

}, true); 

applicationCache.addEventListener('noupdate', function() 
document.getElementById("info").innerHTML+="No application update found<br/>"; 

}, true); 

applicationCache.addEventListener('obsolete', function(){ 
document.getElementById("info").innerHTML--" Application obsolete<br/>"; 

j true); 

applicationCache.addEventListener('progress', function(){ 
document.getElementById("info").innerHTML--" Application progress<br/>"; 

}, true); 

applicationCache.addEventListener('updateready', function() ( 
document.getElementById("info").innerHTML--" Application update ready<br/>"; 

}, true); 


j else1 alert(" Sorry, Your Borser is not Support!"); j 


(3) 创建 demo.manifest 文件 。 
代 但 清单 demo.manifest: 绥 存 status.js 文件 。 
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CACHE MANIFEST 
#version 2.0 V 
CACHE: 


status.]s 


ip dorm 使 用 Python 作为 服务 右 分 三 种 情况 对 ApplicationCache 事件 流程 进行 
测试 。 步 又 如 下 : 

C1) 首先 确保 当前 RAPER Python KKP RREA Python 2.7)， 然 后 将 
Simple HTTPServer.pyc 与 程序 文件 放 在 同一 目录 下 。 

(2) 更 新 Windows 系统 的 hosts 文件 ， 文 件 位 于 C:\WINDOWS\system32\drivers\ete 目录 
Fo FIF hosts 文件 ， 在 该 文件 中 增加 如 下 localhost 的 记录 : 























127.0.0.1 bbs.com 


(3) 配置 SimpleHTTPServer 模块 中 扩展 名 为 “manifest” 的 文件 头 部 信息 ， 配 置 方法 为 
打开 PYTHON HOME/Lib/mimetypes.py 文件 ， 并 添加 如 下 代码 : 


' manifest':'text/cache-manifest manifest, 


(4) 局 动 SimpleHTTPServerpyc。 打 开 Chrome X) wz, Jf4EXhHb EA: bbs.com: 
8000/16-3.html。 在 Chrome i| 95.28 P EI) ez CR AAT 16-1 所 示 。 

C5) 刷新 页 面 〈 在 manifest 文件 没有 更 新 的 情况 下 )， 在 Chrome Ñ i di H iz Is CHR: WU 
图 16-2 所 示 。 














€ 2G | D bbs.com:8000/16-3.html v? [3 bbs.com:8000/16-3.html Y | 4. € > C |[|bbs.com:8000/16-3.html we am 


ÀApplicationCache $ftiefz ApplicationCache $f Af 


Checking for application update Checking for application update 
Downloading application update No application update found 
Application progress 

Application progress 

Application cached 








图 16-1 首次 访问 页 面 触发 的 事件 图 16-2 ”重新 载 入 页 面 触 发 的 事件 





(6) 添加 style.css 文件 ， 并 将 style.css 文件 引用 到 html 页 面 文件 中 。 最 后 修改 manifest 
文件 ， 将 style.css 加 入 manifest 列表 清单 中 ， 以 达到 通过 修改 manifest 文件 测试 
ApplicationCache 事件 触发 流程 的 目的 。 

style.css 文件 代 但 清单 如 下 : 


h3 ( 
margin: Opx; 
text-align:center; 


color: #F47D31; 
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pi 


background-color: Zeee; 
display:block; 

margin: 10px; 

padding: 10px; 
-Webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 


j 
在 html 页 面 中 引入 style.css 文件 ， 代 人 码 清 单 如 下 : 


<!doctype html> 
<html manifest="demo.manifest"> 


<head> 


—M 


«script src-"status.]s" »«/script^ 
<link rel="stylesheet" href="'style.css"'> 
</head> 


</html> 
将 style.css 写 入 manifest 列表 清单 中 ， 人 代码 清单 如 下 : 


CACHE MANIFEST 
#version 2.0V 
CACHE: 

status.]s 


style.css 


CI) Er manifest WF, EIRA DUBIO UE] 16-3 所 示 。 





€ > C |D bbscom:8000/16-3.html wr| A 


ApplicationCache3Bfti$fz 


Checking for application update 


Downloading application update 
Application progress 
Application progress 
Application progress 

I Application progress 

| Application update ready 


图 16-3 ”修改 manifest 文件 重新 载 入 页 面 触发 的 事件 
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通过 对 ApplicationCache 事件 流程 的 测试 ， 可 以 得 出 以 下 结论 : 

D 请 求 访问 任意 一 个 URL (包括 图 片 、CSS、JavaScript 文件 )。 

2) AZN EMAER. 

3) 如 果 疫 有 被 缓存 过 ， 则 触 友 checking FAF, BRZ M manifest 文件 。( 注 意 : 
引入 manifest 的 页 面 ， 即 使 没有 被 列 入 缓存 清音 中， 仍然 会 被 用 户 代理 缓存 )。 如 果 已 经 组 
存 直 接 进 入 6)。 

4) 触发 downloading 事件 ， 第 一 次 下 载 manifest 文件 列表 中 列举 的 资源 。 在 下 载 同时 ， 
周期 性 地 触发 progress 事件 。 

5) 下 载 结束 后 ， 触 发 cached 事件 。 表 示 manifest 中 列举 的 资源 已 经 下 载 完 成 ， 并 且 已 
经 组 在。 进入 步骤 8)。 

6) 如 果 已 经 被 缓存 ， 同 样 触 发 checking 事件 ， 用 户 代 理 检 得 更 新 ， 判 断 是 售 与 已 经 下 
载 的 manifest 文件 一 致 。 

7) 如 果 与 manifest 文件 一 致 ， 将 触发 noupdate 事件 ， 继 续 使 用 原 绥 存 文 件 。 

8) RARER PRE. 

9) 如 果 与 manifest OCTEA4^— 3X, WKAR checking 事件 ， 下 载 manifest 文件 。 

10) 触发 downloading 事件 ， 下 载 manifest 文件 列表 中 列举 的 资源 。 在 下 载 同 时 ， 周 期 
性 地 触发 progress 事件 。 

11) manifest 中 列举 的 文件 已 经 重新 下 载 并 更 新 成 功 ， 触 有 友 updateready 事件 。 进 入 步骤 8)。 

3. 对象 方法 

ApplicationCache 对 象 包括 了 下 面 三 个 方法 : 

(C1) update): 发 起 应 用 程序 缓存 下 载 进 程 。 

(2) abort): 取消 正在 进行 的 缓存 下 载 。 

(3) swapcache(): 切换 成 本 地 最 新 的 缓存 环境 。 

要 以 编程 方式 更 新 缓存， 请 先 调用 applicationCache.update () 方 法。 此 操作 将 尝试 更 新 用 
户 的 缓存 〈 前 提 是 已 更 改 清 单 文件 )。 最 后 ， 当 applicationCache.status 处 于 UPDATEREADY 
状态 时 ， 调 用 applicationCache.swapCache 方法， 即 可 将 诛 绥 存 换 成 新 缓存 。 要 使 用 户 更 
潮 到 最 新 碑 网 站 ， 可 设置 监听 需 ， 以 监听 网 页 加 载 时 的 updateready 事件 。 代 人 码 如 下 : 






































applicationCache.update(); 

applicationCache.addEventListener('updateready', function() ( 
document.getElementById("info").innerHTML-4-" Application update ready<br/>"; 
if (applicationCache.status == window.applicationCache. UPDATEREADY ) ( 


applicationCache.swapCacher(); 








if (confirm(' 这 个 站 点 有 新 版 本 可 用 ， 是 奋 载 入 ?')) (location.reload(); } 
TEBET aonan } 
}, true); 








如 果 要 测试 浏览 絮 显示 效果 ， 可 以 把 上 述 代码 加 入 到 status.js 文件 中 。 执 行 前 面 “ 事 
件 ” 中 的 CDD 28 CD 步 即 可 ， 效 果 如 图 16-4 所 示 。 
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Checking for £ 
Downloading a 


Àpplication pi 
pplication pi 
Application pi 
Application pa 
Àpplication upi 











图 16-4 更 新 网 站 全 最 新 版 本 


第 17 音  HTMLS 的 其 他 应 用 


17.1 HIML5 Notifications 





HTMLS Notifications API PJ DA iE py] va Eu ass E ECPZSEHATB BO UE, n P UL TH se 
适用 于 即时 通信 、 电 子 邮件 等 消息 处 理 网 站 。 


17.4.4. AES SEP ERU 


目前 只 有 基于 webkit 内 核 的 Chrome 浏览 器 支持 Notification 这 一 特性 。 可 以 通过 下 面 
的 代码 测试 其 支持 性 。 








代码 清单 17-1: 支持 性 检测 
if (window.webkitNotifications) { 
alert("OK!Notifications are supported!"); 
velse 1 alert("Sorry!Notifications are not supported! "); } 


17.1.2 ”创建 Notifications 


Notifications 包括 两 种 类 型 ， 根 据 其 A E "iria HTML 信息 提示 。 如 
果 用 户 的 应 用 程序 均 可 使 用 这 两 种 类 型 的 通知 ， 那 么 需要 创建 一 个 水 数 ， 通 过 其 参数 选择 
使 用 哪 种 类 型 。 








function createNotificationInstance(options) { 
if (options.notificationType == 'simple') { 
return window.webkitNotifications.createNotification( 
"icon.png", "Notification Title", "Notification content..."); 
} else if (options.notificationType == 'html") 1 


return window.webkitNotifications.createHTML Notification('http://sohu.com!); 


j 


createNotification 方法 用 于 创建 一 个 文本 信息 提示 。 包 括 三 个 参数 ， 分 别 表 示 信 息 提 示 
图 标 、 标 题 和 内 容 。 

createHTMLNotification 方法 用 于 创建 一 个 HTML 信息 提示 ， 讼 方法 只 有 一 个 参数 ， 表 
示 对 网 页 信息 的 引用 。 

















159 


HTML5, CSS3, JavaScript 开发 手册 





17.1.3 ”显示 提示 许可 

网 站 想 要 显示 提示 ， 必 须 经 过 用 户 的 允许 ， 在 未 经 允许 的 情况 下 ， d 
都 可 能 引发 错误 。 所 以 ， 在 显示 提示 前 ， 要 先 询问 用 户 是 否 允 许 提 示 。 而 这 个 询问 操作 还 
须 是 由 用 户主 动 触 发 的 ， 即 通过 鼠标 或 键盘 事件 触发 。 





























代码 清单 17-2: 显示 提示 许可 
function check(){ 
if (window.webkitNotifications.checkPermission() == 0) { 
// createNotificationInstance( | notificationType: 'html' 1); 


} else { window.webkitNotifications.requestPermission(); } 


} 
在 Chrome 中 的 显示 效果 如 图 17-1 所 示 。 














图 17-1 显示 提示 许可 


17.1.4 ”添加 回调 和 其 他 操作 


No UDE 包括 两 个 回调 函数 : ondisplay《〈 当 显示 时 调用 ) 和 onclose〈( 当 关闭 时 
调用 )。 此 外 ， 还 包括 了 两 个 方法 : show “显示 提示 ) 和 cancel( 关 闭 提示 )。 





function check(){ 
if (window.webkitNotifications.checkPermission() == 0) { 
var pop = createNotificationInstance( (notificationType: 'html')); 
pop.ondisplay = function) { 5; 
pop.onclose = function) { x; 
pop.show(); 


} else { window.webkitNotifications.requestPermission(); } 


j 


17.1.5 ”实例 代码 
代码 清单 17-3 列 出 了 完整 的 实例 代码 。 
代码 清单 17-3: 显示 信息 提示 
<!doctype html> 


<html> 
<head> 
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«script type-"text/javascript" 
function createNotify() ( 

var icon = "1mages/0001 .png"; 

var title = "[" + new Date().toLocaleTimeString() + "] 提示 信息 将 在 10 秒 后 关闭 "; 

var body = "2012 年 第 30 届 和 夏季 奥运 会 在 伦敦 财 幕 ， 下 届 奥 运 会 将 于 2016 年 在 巴西 的 里 约 热 内 
PET. 5 


var popup = window.webkitNotifications.createNotification(icon,title;body); 

















popup.ondisplay = function(event) { setTimeout(function() | event.currentTarget.cancel(); }, 10000); ! 
popup.show(); 
j 
function notify()1 
if (window.webkitNotifications) 1 
if (window.webkitNotifications.checkPermission() == 0)1 
createNotify(); 
} else { window.Notifications.requestPermission(); } 
velse { alert("Sorry Notifications are not supported! "); } 
j 
</script> 
</head> 
<body> 
«button id="btn" onClick-"notify()"^sendNotification«/button- 
</body> 
</html> 








H “sendNotification” 4x, ÆA RIED F, A AEREA P. 7X 
果 如 图 17-2 所 示 。 


Dog [02:05:47] 担 示 信息 将 在 10 秒 关闭 


[O0 | 3012 年 第 30 届 夏季 奥运 会 在 伦敦 闭 莫 ， 下 
届 奥 运 会 将 于 2016 年 在 巴西 的 里 约 执 内 卢 
举行 。 





图 17-2 信息 提示 


| 17.2 HTMLO Progress 


<progress> 标 签 定 义 任务 的 完成 进度 。 通 党 以 0 一 100% 来 代表 进度 。 可 以 使 用 <progress> 
标签 来 显示 JavaScript 中 耗费 时 间 的 函数 进度 。 
17.2.1 语法 与 属性 


Progress JCR Æ HTMLS 标准 草案 中 新 增 的 元 素 之 一 ， 在 默认 情况 下 ，Progress 会 生成 一 
个 和 系统 默认 样式 一 样 的 进度 条 。 效 果 如 网 17-3 所 示 。 
HTMLS Progress 标签 语法 非常 简单 ， 代 人 码 如 下 所 示 : 
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«progress 属性 名 =" 属 性 值 ">...</progress> 
progress 标签 包括 下 面 两 个 特殊 的 属性 : 
VI max 属性 : 该 值 是 一 个 正 浮 点 数学 ， 表 示 progress 的 最 大 值 ， 一 般 是 100。 
M value 属性 : 定义 任务 当前 完成 的 值 。 




















图 17-3 ”进度 条 效果 


17.2.2 ÁX HTMLS 的 样式 


iB "-webkit-progress-bar" JU *-webkit-progress-value" Wj^4- [47628XedET4, AEX 
progress 在 webkit 内 核 浏览 器 中 的 样式 ， 如 Chrome. 237h Gecko 核心 的 浏览 器 也 可 以 通过 
一 个 类 似 的 伪 元 素 “-moz-progress-bar” 来 实现 同样 的 效果 。 

代码 清单 pr.css: 定义 progress 样式 。 


@charset "utf-8"; 
/* CSS Document */ 





/*html5 progress bar styling */ 
progress { 
border: 4px solid #FF0; 
background-color: #F30; 
width: 300px; 
height:40px; 
j 
/* Firefox */ 
progress::-moz-progress-bar { background: ZF3F; } 
/* Chrome */ 
progress::-webkit-progress-bar { background: F30; } 
progress::-webkit-progress-value { background: #009; | 


17.2.3 Progress 实例 


实例 一 ， 本 实例 描述 了 一 个 范围 滑 块 与 进度 条 同步 的 实例 ， 通 过 调整 滑 块 的 位 置 来 对 进 
度 进行 控制 。 





代码 清单 17-4: 范围 输入 与 进度 同步 
<!doctype html> 
<html> 
<head> 
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«meta charset-"utf-8" 
<title>17-5</title> 
«script type="text/Javascript"> 
function changeValue() { document.getElementById("pr").value = 
document.getElementById("rc").value; } 
document.addEventListener(DOMContentLoaded , function () 1 
document.getElementById("rc").addEventListener(change', changeValue, false); 
}, false); 
</script> 
</head> 
<body> 
<progress id="pr" max="100" >Sorry, your browser doesn't support the progress 
element.</progress> <br><br> 
<input id="rc" max="100" min="0" step="5" type="range" value="10" /> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 17-4 所 示 。 





图 17-4 同步 显示 效果 


实例 二 : 接 下 来 这 个 例子 模拟 了 一 个 动态 进度 的 过 程 。 


代码 清单 17-5: 模拟 动态 进程 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>html5-progress</title> 
</head> 
<body> 
<progress value="0" max="100" min="0" id="pro"></progress> 
<span><span id="ProgressTip">0</span>%</span> 
«script type="text/Javascript"> 
var prog=0; 
var myprogress = document.getElementBylId('pro'); 
var tipzdocument.getElementById('ProgressTip); 
function myhandler() 
prog 
myprogress.value-prog; 
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tip.innerHTML=prog; 
if(prog>=100) 
clearInterval(timer); 
j 
var timer = setInterval(myhandler,200); 
</script> 
</body> 
</html> 








代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 17-5 所 示 。 





图 17-5 模拟 动态 进程 
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第 18 意 CSS3 属性 


CSS3 是 CSS 技术 的 升级 孤本 ，CSS3 语言 开发 是 朝 痢 模块 化 发 展 的 。 以 前 的 规范 作为 
一 个 模块 实在 是 太 庞 大 而 且 比较 复杂 ， 所 以 ， 需 要 把 它 分 解 为 一 些小 的 模块 ， 更 多 痢 的 模块 
EMAR. AKERRA: 盒子 模型 、 列 表 模 块 、 超 链接 方式 、 语 言 模块 、 背 景 和 边框 、 
文字 特效 、 多 栏 布局 等 。 


| 18.1 “边框 属性 


CSS3 边框 属性 用 来 指定 HTML 元 素 边框 的 宽度 、 样 式 及 颜色 。 在 HTML 中 通常 使 用 
表格 来 建立 文字 的 边框 。 使 用 CSS 边框 属性 不 但 能 使 建立 的 网 页 效 末 更 好 ， 而 且 它 可 以 文 
持 任何 元 素 。 在 本 节 中 ， 将 讲解 以 下 边框 属性 : 

E borde-colors 

B border-image 

E border-radius 

E box-shadow 




















18.1.1  border-colors 属性 


borde-colors 属性 用 来 设置 对 象 边框 的 多 重 颜 色 。 该 特性 包括 : 上 边框 闫 色 、 右 边框 闫 
E FUERE, AERE. 

语法 格式 : 

border-color: <color> 

相关 属性 : border-top-colors | border-right-colors | border-bottom-colors | border-left-colors 

BUB 

color 参数 值 可 以 是 颜色 名 称 ， 或 是 rgb fü (rgb (255,0,0 ))， 或 是 十 六 进 制 数 
(#FF0000). 





A 友情 提示 

对 于 Gecko 内 核 的 浏览 器 而 言 ， 设 置 边 框 闫 色 需要 加 上 “-moz-” 前 级 。 例 如 “-moz- 
border-top-colors 。 

WHH: 





使 用 CSS3 的 border-colors 属性 ， 如 果 设 置 了 border HERE X px. IAW AEA 
border 上 使 用 X 种 颜色 ， 每 种 颜色 显示 1px 的 宽度 。 如 果 设 置 的 border 宽度 是 10 个 像素 ， 
但 是 只 声明 了 5 或 6 种 颜色 ， 那 么 最 后 一 个 颜色 将 被 添加 到 剩 下 的 宽度 。 
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举例 如 下 : 


代码 清单 18-1: 设置 border-colors 属性 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<head> 
«title </title> 
<style type="text/css"> 
div { 
border-width:8px; 
border-style:solid; 
-moz-border-top-colors: #00F #0033FF #0066FF #0099FF 200CCFF Z00FFFF ZAFA6CE ZDADSFZ; 
-moz-border-right-colors: 200F #0033FF #0066FF #0099FF Z00CCFF #00FFFF ZAFA6CE ZDADSFA; 
-moz-border-bottom-colors: #00F #0033FF #0066FF #0099FF #00CCFF #00FFFF ZAFA6CE 
#DAD5F4; 
-moz-border-left-colors: #00F #0033FF #0066FF #0099FF #00CCFF #00FFFF #AFA6CE #DAD5F4; 
j 
</style> 
</head> 
<body> 
<div> 在 Firefox 1l jd S KHER </div> 
</body> 
</html> 


代码 说 明 : 

通过 border-width 将 边框 设置 了 8px 的 宽度 ， 每 种 颜色 显示 1px 的 宽度 ， 共 有 8 PPR 
色 。 运 行 后 ， 在 Firefox 浏览 器 中 显示 效果 如 图 18-1 所 示 。 当 把 border-width 设置 为 18px 
时 ， 前 面 8px 的 宽度 设置 为 8 PRE, PRAI 10px 由 最 后 一 种 颜色 ““#pAD5F4” 来 洽 
Jt. Wl 18-2 所 示 。 

















| Firefox v | es "Firefox * . 


| 1 x ind m A i tajil 一 L3 zx 
Sadia eka pra ee Rond, 在 Firefoz 浏 览 才 显示 边框 颜色 渐变 效果 





图 18-1 border-width 为 8px 时 渐变 效果 图 18-2 border-width 为 18px 时 渐变 效果 


18.1.2  border-image 属性 


border-image 属性 为 复合 属性 ， 在 CSS3 的 border-image 属性 中 ， 人 允许 用 户 使 用 图 像 创 
建 边框 。 


CSS3 属性 (108 18 X 


语法 格式 : 

border-image : nonel|<lmage>[ <number> | <percentage>|{1,4}|[ stretch | repeat | round ]{0,2} 

相关 属性 : border-image-source|border-image-slice|border-image-width|border-image-outset|border- 
Image-repeat 

取 值 : 

(I) none: 无 背景 图 片 。 

(2) image: 使 用 绝对 或 相对 地 址 指定 图 像 。 

(3) number: 用 浮 点 数 指定 宽度 ， 不 允许 负 值 。 

(4) percentage: 用 百分比 指定 宽度 。 不 允许 负 值 。 

(5) stretch: 指定 用 拉 伸 方式 来 填充 边框 背景 图 。 该 值 为 默认 值 。 

(6) repeat: PEEM FAD ARKANA K o WR E A ERL A A ER ET o 

(7) round: 指定 用 平 铺 方 式 来 填充 边框 背景 图 。 图 片 会 根据 边框 的 尺寸 动态 调整 图 片 
的 大 小 直至 正好 可 以 铺 满 整个 边框 。 

WHH: 

number 和 percentage 可 以 设置 1 至 4 个 值 ， 这 4 个 值 依次 表示 上 边 距 、 右 边 距 、 下 边 距 
和 左边 距 。 如 果 第 4 个 值 被 忽略 ， 则 它 与 第 2 个 值 是 相同 的 ， 如 果 第 3 个 值 也 被 忽略 ， 则 它 
与 第 1 个 值 是 相同 的 ;， 如果 第 2 个 值 也 被 忽略 ， 则 它 与 第 1 个 值 是 相同 的 。 


























border-image 属性 的 4 MEH THRE T ENSA MIME» Eyi 
参照 点 分 别 为 图 像 的 上 边 距 、 右 边 距 、 下 边 距 和 左边 距 。 将 其 
划分 为 9 个 区 域 : 4 个 边 角 (border-top-left-image，border-top- E + 
right-image, border-bottom-left-image, border-bottom-right-image); E k 


4 NZ Cborder-top-image, border-right-image, border-bottom- 
image, border-left-image) 和 中 间 区 域 ， 如 图 18-3 所 示 。 
在 border-image 中 ，4 个 边 角 框 图 片 Cborder-top-left- 


image ~ border-top-right-image ~  border-bottom-left-image ~ 





|J iB 
图 18-3 图 像 文件 的 分 割 〈 一 ) 
border-bottom-right-image) 是 没有 任何 展示 效 末 的 ， 不 会 平 铺 ， 不 会 重复 ， 也 不 会 拉 伸 ， 有 





点 类 似 于 视觉 中 的 育 点 。 

4 个 边 的 4 个 区 域 属于 展示 效果 的 作用 区 ， 上 下 区 域 即 border-top-image 和 border- 
bottom-image 区 域 受 到 展示 效果 属性 的 第 一 个 参数 (水 平方 回 效果 〉 影响 : 如 果 为 repeat, 
则 此 区 域 图片 会 水 平 重复 ; 如 果 是 round， 则 此 区 域内 的 图 片 会 水 平平 铺 ， 如 果 是 stretch, 
则 此 区 域 中 的 图 请 就 会 被 水 平 拉 伸 。 左 右 区 域 上 只 有 垂直 方 各 上 的 展示 效果 ， 与 上 下 区 域 效 果 
对 应 。 

中 则 的 区 域 ( 空 日 格 〉 受 到 全 部 参数 的 作用 ， 在 水 平和 和 王 直 两 个 维度 上 都 有 展示 效果 
( 平 铺 、 拉 伸 等 )。 如 图 18-4 所 示 。 

A 友情 提示 

对 于 webkit ^43 5,2» ( Chrome/Safari )， 写 法 为 “-webkit-border-image”; 对 于 Gecko 
内 核 浏览 器 ( Firefox )， 写 法 为 “-moz-border-image”; 对 于 Presto A4Z3195,2$ (Opera) 5 
法 为 “-o-border-image”。 
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图 18-4 图 像 文件 的 分 割 〈 二 ) 


1. 上 下 区 域 的 水 平 拉 伸 

上 下 区 域 受 到 展示 效果 属性 的 第 一 个 参数 (水 平方 加 效果) 影响 ， 也 束 是 说 border- 
image: url(border.png) 30 30 30 30 与 border-image: url(border.png) 30 的 显示 效果 是 相同 的 。 默 
认 情 况 下 ， 显 示 方 式 为 stretch 时 ， 此 区 域 中 的 图 片 驶 会 被 水 平 拉 伸 。 

举例 说 明 : 











“代码 清单 18-2: border-image 属性 的 简单 使 用 

<IDOCTYPE html» 

<html> 

<head> 

<meta charset="utf-8"> 

<style type="text/css"> 

div { 
border-image: url(border.png) 30 ; 
-moz-border-image: url(border.png) 30; — /* Firefox */ 
-webkit-border-image: url(border.png) 30 ; /* Safari E; Chrome */ 
-o-border-image: url(border.png) 30; /* Opera */ 
border-width: 1 5px; 
width:280px; 

j 

</style> 

</head> 

<body> 

<div>border-image:url CERIS) AB CD 的 使 用 </div> 
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原始 图 像 :<br/> 
«img src-"border.png" /> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-5 所 示 。 


| J D 18-2 html x 
€ > Q | TRU/EEEREAGR/18/18-2.html| g ~% | 
* ! ' 
border-image:url (BAHIZ) A B CD 


的 使 用 


d + 
Ins Els : 
e 


SD — 


图 18-5 border-image 的 简单 使 用 


























2. round 与 repeat 显示 方式 

repeat 指定 用 平 铺 方式 来 填充 边框 背景 图 。 当 图 片 们 到 边界 时 ， 如 果 超 过 则 被 截断 。 
round 指定 用 平 铺 方 式 来 填充 边框 背景 图 。 图 厂 会 根据 边框 的 尺寸 动态 调整 图 厂 的 大 小 直到 
正好 可 以 铺 满 整个 边框 。 

目前 ， 在 webkit 内 核 “(Chrome/Safari〉 的 浏览 器 下 round 属性 和 repeat 属性 似乎 没有 区 
别 ， 显 示 的 效果 是 一 样 的 。 而 在 Firefox 下 可 以 准确 区 分 这 两 个 参数 。 

举例 说 明 : 








代码 清单 18-3: round 与 repeat 显示 方式 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
div { 
border-width: 20px; 
width: 145px; 
height: 145px 


j 

#round 1 
border-image: url(images/border.png) 30 round; 
-moz-border-image: url(images/border.png) 30 round; — /* Firefox */ 
-webkit-border-image: url(images/border.png) 30 round; /* Safari Ej Chrome */ 
-o-border-image: url(images/border.png) 30 round; /* Opera */ 

j 

#repeat { 


border-image: url(images/border.png) 30 repeat; 
-moz-border-image: url(images/border.png) 30 repeat; —/* Firefox */ 
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-webkit-border-image: url(images/border.png) 30 repeat; /* Safari 与 Chrome */ 
-o-border-image: url(images/border.png) 30 repeat; /* Opera */ 
j 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td><div id="round">round</div></td> 
<td><div id="repeat">repeat</div></td> 
</tr> 
</table> 
</body> 
</html> 





ARIDE Firefox 3| wa P HJ ERAR 18-6 所 示 。 


Firefox ™ 








图 18-6 “round” 与 “repeat” 显 示 方 式 


边框 背景 
: CSS2 中 实现 一 个 背景 图 片 需要 把 图 片 做 得 很 长 ， 而 且 和 需要 两 层 标签 。 但 是 在 CSS3 
中 只 需要 一 个 很 短 的 图 片 和 一 个 标签 融 可 以 实现 。 
举例 说 明 : 











代码 清单 18-4: 使 用 border-image 实现 背景 图 片 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<style type="text/css"> 

div{ 
width:240px; 

height:40px; 

-moz-border-image:url(images/1.png)l 1; 
-webkit-border-image:url(images/1.png) 1 1; 
text-align:center; 
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padding-top:20px; 
j 
</style> 
</head> 
<body> 
<div> 设 置 边框 背景 </div> 
«p > 原始 图 片 :<img src="images/2.png" /></p> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-7 所 示 。 





图 18-7  border-image 实现 背景 图 片 效 果 





A 友情 提示 
由 于 目前 主流 浏览 器 对 border-image 的 border-image-source. border-image-slice. border- 
image-width. border-image-outset 和 border-image-repeat 还 不 支持 ， 所 以 在 此 不 做 过 多 叙述 。 


18.1.3 border-radius 届 性 


在 CSS2 中 实现 圆 角 效果 是 每 个 设计 人 员 都 非常 头痛 的 事情 ， 可 是 在 CSS3 中 实现 圆 角 
却 变 得 非常 容易 。CSS3 中 提供 了 border-radius 属性 ， 可 用 来 创建 圆 角 。 

border-radius 属性 是 一 种 复合 属性 ， 可 以 一 次 性 定义 border-top-right-radius. border- 
bottom-right-radius、border-bottom-left-radius、border-top-left-radius 等 属性 。 

语法 格式 : 

border-radius: [ «length» | «percentage» ]{1,4} [/ [ «length» | <percentage> |{1,4} | 

相关 属性 : border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius | 
border-top-left-radius 

BUB: 

(1) length: 用 长 度 值 设置 对 象 的 圆 角 半径 长 度 。 不 允许 负 值 。 

(2) percentage: 用 上 百分比 设置 对 象 的 圆 角 半径 长 度 。 不 允许 负 值 。 

说 明 : 

设置 圆 角 边框 。 包 含 了 两 个 参数 ， 两 个 参数 以 “/” 分 隅 ， 每 个 参数 允许 设置 1 一 4 个 参 
数值 ， 第 1 个 参数 表示 水 平 半 径 ， 第 2 个 参数 表示 垂直 半径 ， 如 第 2 个 参数 省 略 ， 则 默认 等 
于 第 1 个 参数 。 

水 平 半 径 : 

如 果 提 供 全 部 四 个 参数 值 ， 则 将 按 上 左 (top-left)、 上 右 (top-right)、 下 右 (bottom-right)、 
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FÆ (bottom-left) 的 顺序 作用 于 四 个 角 。 


如 果 只 提供 一 个 ， 将 用 于 全 部 的 四 个 角 。 
如 果 提 供 两 个 ， 则 第 一 个 用 于 上 左 (top-lef)、 下 右 (bottom-right)， 第 二 个 用 于 上 右 (top- 





right)、 下 左 (bottom-left)。 


left) , 





如 果 提 供 三 个 ， 则 第 一 个 用 于 上 左 (top-left)， 第 二 个 用 于 上 右 (top-right)、 下 左 (bottom- 
第 三 个 用 于 下 右 (bottom-right)。 

垂直 半径 也 用 循 以 上 四 点 。 

表 18-1 列 出 了 border-radius KPF 2E f$ 5 E ECCE fS BUE Xe 


表 18-1 水 平 半 径 与 垂直 半径 参数 设置 形式 


div{ border-radius: 13px; } 
等 效 代码 ， 
divi 
提供 一 个 参数 border-top-right-radius: 13px; 
border-bottom-right-radius:13px; 
border-bottom-left-radius:13px; 
border-top-left-radius: 13px; 


j 

div{ border-radius: 13px 45px; } 

等 效 代码 : 

div{ 

ELAETELAN border-top-left-radius:13px; 
提供 两 个 参数 border-top-right-radius:45px; 

border-bottom-right-radius:13px; 
border-bottom-left-radius:45px; 








水 平 与 垂直 半 } 
径 相 同时 div (border-radius: 13px 45px 18px;]^ 





等 效 代码 : 
div{ 
提供 三 个 参数 border-top-left-radius:13px; 
border-top-right-radius:45px; 
border-bottom-right-radius:1 8px; 
border-bottom-left-radius:45px; 
j 
div (border-radius: 13px 45px 18px 75px;j 
等 效 代码 : 
div{ 
ELA UU AS a border-top-left-radius:13px; 
提供 四 个 参数 border-top-right-radius:45px; 
border-bottom-right-radius:18px; 
border-bottom-left-radius:75px; 
j 
div | border-radius:10px /20px ;} 
等 效 代码 : 
div 
提供 一 个 参数 border-top-left-radius: 10px 20px; 
border-top-right-radius: 10px 20px; 
border-bottom-right-radius: 10px 20px; 
border-bottom-left-radius: 10px 20px; 





JKOE 5 aie ELO } 
径 不 同时 div{ border-radius:10px 20px/20px 10px ;! 
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等 效 代码 : 
div! 
y border-top-left-radius: 10px 20px: 
量 代 两 个 参 p px 20px; 
提供 两 个 参数 border-bottom-right-radius: 10px 20px; 


Jii DIDIDIUI 


border-top-right-radius: 20px 10px; 
border-bottom-left-radius: 20px 10px; 
j 


提供 三 个 参数 


提供 四 个 参数 


提供 一 个 参数 


A 友情 提示 
对 于 Gecko 内 核 的 浏 
border-radius" , 


1. 设置 圆 角 





CSS3 属性 (108 18 X 


CHE) 


div (border-radius:40px 80px 30px/65px 20px 30px;j 

等 效 代 但 ; 

div 
border-top-left-radius: 40px 65px; 
border-top-right-radius: 80px 20px; 
border-bottom-right-radius: 30px 30px; 
border-bottom-left-radius: 80px 20px; 

j 

div{ border-radius:40px 80px 30px 65px/65px 20px 30px 8px;j 

等 效 代 但 ; 

div 
border-top-left-radius: 40px 65px; 
border-top-right-radius: 80px 20px; 
border-bottom-right-radius: 30px 30px; 
border-bottom-left-radius: 65px 20px 8px; 

j 

div | border-radius:10px /20px ;} 

等 效 代 但 ; 

div 
border-top-left-radius: 10px 20px; 
border-top-right-radius: 10px 20px; 
border-bottom-right-radius: 10px 20px; 
border-bottom-left-radius: 10px 20px; 


j 


Tori 


览 器 而 言 ， 设 置 边 框 圆 角 需 要 加 上 “-moz-” 前 级 。 例 如 “-moz- 


如 果 只 为 border-radius 属性 提供 一 个 参数 值 ， 则 该 参数 值 将 用 于 全 部 的 四 个 角 。 这 样 了 就 





为 边框 设置 了 等 水 平 半径 四 个 圆 角 。 


举例 说 明 : 


代码 清单 18-5: 设置 等 水 平 半径 四 个 圆 角 边框 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> i] ff </title> 

<style type="text/css"> 

div{ 
border-width:2px ; 
width:200px; 
border-style:solid; 
padding:20px; 

j 

#test{ border-radius: 13px; 

</style> 

</head> 

<body> 


j 
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<div align="center" id="test"> 爱 我 中 华 </div> 
</body> 
</html> 


代码 分 析 : 
通过 border-radius 属性 可 以 为 边框 设置 水 平 半径 四 个 圆 角 。border-radius 也 可 以 分 别 设 
置 四 个 角 ， 下 和 面 代码 与 border-radius:13px 作用 相同 : 


#test{ 





border-top-right-radius:13px; 
border-bottom-right-radius: 13px; 
border-bottom-left-radius:13px; 


border-top-left-radius:13px; Dmm 
€ > Q |[)18-5htmlz;| A 


j 


代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-8 所 示 。 
2， 绘 制 圆 形 与 椭圆 


下 面 把 绘制 圆 角 改变 一 下 ， 绘 制 一 个 圆 形 和 一 个 椭圆 。 




















举例 说 明 : 图 18-8 ”绘制 贺 角 边框 效果 
代码 清单 18-6: 绘制 圆 与 椭圆 

<html> 

<head> 


<meta charset="utf-8"> 
<title> [3E 5; m </title> 
«style type="text/css"> 
Zdivl { 

width: 100px; 

height: 100px; 

border-radius: 100px; 





border:1px solid; j 
#div2 { 
width: 150px; 
height: 100px; 
border-radius: 50%; 
border:1px solid; } 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td><div id="div 1"> </div></td> 
<td><div id="div2"></div></td> 
</tr> 
</table> 
</body> 
</html> 
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代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-9 所 示 。 


y DESKA ~ 
€ > Q [DB8I18/8-6ht]y7| À 


18.1.4 box-shadow 属性 
在 CSS3 中 ， 可 以 使 用 box-shadow 属性 添加 阴影 到 盒 上 。 用 - C 9 
户 可 以 通过 调整 box-shadow EHAR T ELITS BE. box- 
shadow 可 以 使 用 一 个 或 多 个 投影 ， 类 型 可 以 是 默认 的 投影 ， 以 及 
HJ XE HI PH S$ AN K o 
语法 格式 : 
box-shadow: h-shadow v-shadow blur spread color inset; 
BUB 
(1) h-shadow: HK Fm RERE). 
(2) v-shadow: HERE ORERE). 
(3) blur: 阴影 模糊 值 〈 不 允许 为 负 )。 
(4) spread: 阴影 扩展 半径 ， 正 值 放 大 ， 负 信 缩 小 。 
(5) color: BHsZBENES. 
(6) inset: 设置 阴影 类 型 为 内 阴影 。 该 值 为 空 时 ， 则 对 象 的 阴影 类 型 为 外 阴影 。 








图 18-9 绘制 圆 与 椭 














A 友情 提示 

对 于 webkit 内 核 浏览 器 (Chrome/Safari )， 写 法 为 “-webkit-border-shadow”; 对 于 Gecko 
内 核 浏 览 器 ( Firefox )， 写 法 为 “-moz-border-shadow”; 对 于 Presto 内 核 浏览 器 (Opera), 5 
法 为 “-o-border-shadow”。 


1. 绘制 阴影 

代码 清单 18-7 为 box-shadow 的 一 个 使 用 实例 。 在 该 实例 中 通过 “box-shadow: 10px 
13px 3px 7888888; ”语句 为 div 对 象 绘制 了 阴影 。 

举例 说 明 : 


代码 清单 18-7: 设置 盒 阴 影 效 果 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 阴 影 </title> 
«style type="text/css"> 
divi 
width:200px; 
height:100px; 
background-color:yellow; 
box-shadow: 10px 13px 3px 7888888; | 
</style> 
</head> 
<body> 
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<div></div> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-10 所 示 。 | 

2. 绘制 多 重 阴 影 € > CD B/18/18-7hi f?) à 

Wc e RSS S TET A DO y y SD SER. AATE 
Ie AGUAS s emm AB wit 
Jai xe X B xz 

举例 说 明 : 











图 18-10 ”阴影 效果 


代码 清单 18-8: 绘制 多 重 阴 影 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 多 重 阴 影 </title> 

«style type="text/css"> 

divi 
width:200px; 
height: 100px; 
background-color:yellow; 
box-shadow: 10px 10px green,18px 18px blue; | 

</style> 

</head> 

<body> 

<div></div> 
</body> 
</html> 





ARIS Chrome 浏览 器 中 的 显示 效果 如 图 18-11 所 示 。 


|€ > Q [)*589/18/18-8.hl | à 


18.2 fix 


CSS3 包含 几 个 新 的 背景 属性 ， 允 许 更 大 限度 地 控制 背 
AUR o tnb. 将 话 细 介绍 以 下 几 种 背景 属性 : 
E background-clip 














| 图 18-11 多 重 阴 影 
E background-size 


E background-origin 


18.2.4 background-clip 属性 


background-clip 属性 为 CSS3 "Pts TE, HORE HE HU 9 3 PCT 
语法 格式 : 


background-clip: border-box | padding-box | content-box | no-clip 
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WE: 

(1) border-box: 从 border X SX ph] / E B3 E e 

(2) padding-box: 从 padding X EX / 3A BT TH sx. 

(3) content-box: 从 content X 3X [n] / AA BT TH xx. 

(4) no-clip: 从 border X ER HA E B3 1H 3x o 

说 明 : 

如 果 background-clip 属性 取 padding 值 ， 则 background 忽略 padding 边缘 ，border 是 透 
明 的 。 如 果 background-clip 属性 取 border 值 ， 则 background 包括 border 区 域 。 如 果 
background-image 图 片 有 多 个 ， 则 对 应 的 background-clip (EZ TR] H]3 54; lá. background 的 
层次 结构 如 图 18-12 所 示 。 














top 
i content edge 
margin 


. padding edge 


content : border edge 





图 18-12 background 的 层次 结构 
A 友情 提示 
对 于 webkit ^j4Z 34 52$ ( Chrome/Safari )， 写 法 为 “-webkit-border-cllip”; 对 于 Gecko 
内 核 浏览 器 Firefox ), 写法 F ^-moz-border-clip"; 对 于 Presto A^4Z3|9,2$ (Opera) 57% 
7] *-o-border-clip" . 
为 了 必 助 读者 更 直观 地 了 解 border-clip 属性 如 何 剪裁 背景 区 域 ， 代 码 清单 18-9 演示 了 
当 border-clip 属性 值 分 别 为 border-box. padding-box 和 content-box 时 的 显示 效 采 。 


举例 说 明 : 


代码 清单 18-9: border-clip 属性 值 的 演示 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>background-clip</title> 
<style type="text/css"> 
div { 
border:dashed 15px; 
width: 500px; 
height: 60px; 
padding: 10px; 
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background-color:yellow; } 
#div1{ 
background-clip: border-box; 
-moz-background-clip: border-box; 
-webkit-background-clip: border-box; } 
#div2{ 
background-clip: padding-box; 
-moz-background-clip: padding-box; 
-webkit-background-clip: padding-box; } 
#div3{ 
background-clip:content-box; 
-moz-background-clip: content-box; 
-webkit-background-clip: content-box; } 
</style> 
</head> 
<body> 
<div id="div 1">background-clip:border-box</div><br/> 
<div id="div2">background-clip:padding-box</div><br/> 
<div id="div3">background-clip:content-box</div> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-13 所 示 。 


y 门 background-clip 
€ > C 中 538JavaScript 开 发 手册 /程序 代码 /18/18-9.htm v? | A 
NEN Hm dl Mx NEN - 


backgroud clipi border-box 





图 18-13  border-clip 显示 效果 


18.2.2  background-origin 属性 








在 CSS3 中 ，background-origin 属性 用 于 指定 定位 区 域 的 背景 图 像 。 


在 content-box、padding-box 或 border-box 区 域 。 
语法 格式 : 


background-origin: padding-box|border-box|content-box; 
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WE: 

padding-box: 从 padding 区 域 (S padding) 开始 显示 背景 图 像 。 

border-box: 从 border Xit (S border) 开始 显示 背景 图 像 。 

content-box: 从 content 区 域 开 始 显示 背景 图 像 。 

说 HH 3 

如 果 background-origin 取 padding-box 值 ， 则 背景 图 像 定 位 相对 于 padding 边缘; WR 
background-origin HX border-box 值 ， 则 意味 着 背景 图 像 定 位 相对 于 border 边缘 ; 如 果 
background-origin HX content-box 值 ， 则 图 像 定 位 相对 于 内 容 边缘 。 与 background-clip 相同 ， 
LME HE A S. UR background-clip HX border-box 值 ，background-origin HX 
border-box fH. Jf H. background-position EX “top left”( 默 认 初 始 值 )， 则 背景 图 像 左 上 角 将 
会 被 截 取 挥 。 


A 友情 提示 

对 于 webkit /]4Z3| 95,28 ( Chrome/Safari), 5 ;X7j "-webkit-border-origin"; 对 于 Gecko 
AO (Firefox), 5744 "-moz-border-origin"; 对 于 Presto AJZ3|9,2$ (Opera) 5 
ik7J "-o-border-origin", 


举例 说 明 : 


为 了 更 直观 地 说 明 borderorigin 属性 如 何 定位 背景 区 域 ， 代 码 清 单 18-10 演示 了 当 
border-origin 属性 值 分 别 为 border-box. padding-box 和 content-box 时 的 显示 效果 。 


























代码 清单 18-10: border-origin 属性 值 的 演示 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>background-origin</title> 
<style type="text/css"> 
div { 
border: dashed 10px; 
width: 500px; 
height: 40px; 
padding: 15px; 
background-image: url('images/tubiao.png); 
background-repeat: no-repeat; 
background-position:left top; } 
Zdivl { 
background-origin: border-box; 
-moz-background-origin: border-box; 
-webkit-background-origin: border-box; } 
#div2 { 
background-origin: padding-box; 
-moz-background-origin: padding-box; 
-webkit-background-origin: padding-box; } 
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#div3 { 
background-origin: content-box; 
-moz-background-origin: content-box; 
-webkit-background-origin: content-box; } 
</style> 
</head> 
<body> 
<div id="div 1">background-origin:border-box</div><br/> 
<div id="div2">background-origin:padding-box</div><br/> 
<div id="div3">background-origin:content-box</div> 
</body> 
</html> 








代码 在 Chrome 浏览 器 的 显示 效果 如 图 18-14 所 示 。 


d [] background-origin x 
© 3》 CQ 0D ;8JavaScript 开 发 手册 /程序 代码 /18/18-10.htm|yY| A 


| | 


ckground-origin:border-box 


Ll 


har "= - 


"et 
me é x è 
Ner oaund-origin:padding-box 
E 


————Ó 


e ogund-origin:content-hox 





图 18-14  border-origin 显示 效果 


18.2.3 background-size 属性 


在 CSS3 H, background-size 属性 用 于 指定 背景 图 像 的 尺寸 大 小 。 以 像素 或 百分比 显 
示 。 当 指定 为 百分比 时 ， 大 小 会 由 所 在 区 域 的 宽度 、 高 度 、 以 及 background-origin 的 位 置 决 
定 。 此 外 ， 还 可 以 通过 cover 和 contain KX El Fr ETT fip 

语法 格式 : 

background-size: length | percentage | cover | contain | auto; 

取 值 : 

(D) length: 用 长 度 值 指定 育 景 图 像 大 小 。 不 允许 负 值 。 

(2) percentage: 用 百分比 指定 背景 图 像 大 小 。 不 允许 负 值 。 

(3) cover: 将 背景 图 像 等 比 缩放 到 完全 缆 辣 容器 ， 背 景 图 像 有 可 能 超出 容器 。 

(4) contain: 将 背景 图 像 等 比 缩放 到 宽度 和 高 度 与 容器 的 宽度 和 高 度 相 等 ， 背 景 图 像 始 
ZEE BLA EROR VI e 

(5) auto: 背景 图 像 的 真实 大 小 。 


















































180 


CSS3 属性 (108 18 X 


L 友情 提示 
对 于 webkit 内 核 浏 览 器 (Chrome/Safari )， 写 法 为 “-webkit-border-size”;， 对 于 Gecko 内 
核 浏览 器 (Firefox )， 写 法 为 “-moz-border-size”; 对 于 Presto 内 核 浏 览 器 (Opera )， 写 法 为 


*-o-border-size" , 
举例 说 明 : 


代码 清单 18-11 演示 了 当 border-origin 属性 值 分 别 为 length. percentage. cover 和 
contain 时 的 显示 效果 。 





代码 清单 18-11: border-size 属性 值 的 演示 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>background-size</title> 
<style type="text/css"> 
div{ 
border: solid 2px; 
width: 500px; 
height: 80px; 
background-image: url(images/flower.png'); 
background-repeat: no-repeat; } 
Zdivl { 
background-size:120px 60px; 
-moz-background-size:120px 60px 
-webkit-background-size:120px 60px } 
#div2 { 
background-size:cover; 
-moz-background-size:cover; 
-webkit-background-size:cover; } 
#div3 { 
background-size: contain; 
-moz-background-size: contain; 
-webkit-background-size: contain; } 
#div4 { 
background-size:100% 100%; 
-moz-background-size:100% 100%; 
-webkit-background-size: 100% 100%; } 
</style> 
</head> 
<body> 
<div id="div 1">background-size:120px 60px</div><br/> 
<div id="div2">background-size:cover</div><br/> 
<div id="div3">background-size:contain</div><br/> 
<div id="div4">background-size:100% 100%</div> 
</body> 
</html> 
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代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-15 所 示 。 





图 18-15  border-size 显示 效果 


18.2.4 multiple background 属性 
多 重 背 景 图 像 可 以 把 不 同 背 景 图像 只 放 到 一 个 块 元 素 里 。 通 过 指定 多 个 background- 


image. background-origin. background-clip. background-repeat. background-size. background- 
position 来 实现 一 个 元 素 的 背景 中 显示 多 个 图 像 功能 。 
语法 格式 : 


background: background-image | background-origin | background-clip | background-repeat | 





background-size | background-position 


WE: 

(1) background-image: 指定 或 检索 对 象 的 背景 网 像 。 

(2) background-origin: 指定 背景 的 显示 区 域 。 参 见 background-origin. 

(3) background-clip: 指定 背景 的 裁 前 区域。 参见 background-clip. 

(4) background-repeat: 设置 或 检索 对 象 的 背景 网 像 如 何 重 复 平 铺 。 

(5) background-size: 指定 背景 图 片 的 大 小 。 参 见 background-size. 

(6) background-position: 议 置 或 检索 对 象 的 背景 图 像 位 置 。 

说 明 : 

多 个 图 厂 URL 之 间 使 用 过 号 隔 开 即 可 ; 如 果 有 多 个 背景 图 片 ， 而 其 他 属性 只 有 一 个 
《例如 background-repeat 只 有 一 个 )， 则 表明 所 有 背景 图 片 属性 都 应 用 该 值 。 

CSS3 中 在 容器 的 多 层 背 景 下 ， 各 子 属性 用 喜 号 来 分 隔 值 。 如 果 指 定 的 值 如 下 : 






























































background-image: wl, w2, w3,..., wM 
background-repeat: x1, x2, x3,..., XR 
background-size: yl, y2, y3,..., yS 


background-position: s1, s2, s3,..., SP 
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ALAS, FREA N = max(MjR, S, P). 
对 于 每 个 属性 ， 可 以 假设 它 的 值 为 n， 





通过 重复 指 


background-image: w1,...wM, w1,...wM, wl,... /* N values */ 
.XR, x1,...xR, x1,... /* N values */ 
.yS, y1,...y S, y1,... /* N values */ 


JP, s1,...rP, s1,... /* N values */ 


background-repeat: x1,.. 
background-size: y1,.. 


background-position: s1,.. 
例如 : 


background-image: url(img/mb.png), url(img/mb.png), url(img/mb.png); 
background-position: left top, -320px bottom, -640px top; 


background-repeat: no-repeat, no-repeat, repeat-y; 
或 者 : 


background: url(img/mb.png) left top no-repeat, url(img/mb.png) 


url(img/mb.png) -640px top repeat-y; 


定 的 值 如 下 所 示 : 


-320px bottom  no-repeat, 


在 CSS3 PH UESAC PERSANE RRR. Tui. 18-12 使 用 background-image 
属性 将 5 个 背景 图 像 放 到 了 一 个 div 元 素 中 ， 并 通过 background-position 属性 对 其 进行 定位 。 


举例 说 明 : 


代码 清单 18-12: 多 重 背 景 图 像 的 实现 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Multiple Background</title> 
<style type="text/css"> 
div { 
border: solid 2px; 
width: 400px; 
height: 200px; 
background-repeat: no-repeat; 


background-image: url("images/bf1.png"),url("images/bf2.png"),url("images/bf3.png"), 


url("images/bf4.png"), url("images/tree.png"); 
background-position: left, top, center, right, bottom; } 

</style> 

</head> 

<body> 

<div ></div> 

</body> 

</html> 





ARIES Chrome 浏览 器 中 的 显示 效果 如 图 18-16 PZR. 
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€ > Q [| ESXHB/ERIE/18/18-12.h]zv| ~ 





图 18-16 Multiple Background 演示 效果 


18.3. 颜色 属性 


CSS2 中 色彩 模式 只 有 RGB 色彩 模式 (Red, Green, Blue? 和 十 六 进 制 模式 ， 为 了 能 
持 透 明 opacity 的 Alpha 值 ，CSS3 又 增加 了 RGBA 色彩 模式 (Red, Green, Blue, Alpha). 

为 了 增加 主观 感受 ，CSS3 又 加 入 HSL MERAM HSLA MEE (HSL 模式 与 HSLA 
模式 的 关系 跟 RGB 与 RGBA 的 关系 一 样 )。 在 本 和 中 ， 将 详细 介绍 以 下 需 色 属性 : 

E HSL colors 

8 HSLA color 

B opacity 

E RGBA colors 











18.3.1 HSL colors 属性 


HSL ERKENE LCA AERE, RNE BAEO BEL) — Bil 
C68 XCTI AERA AAK ENEL EIRE RE AAF. HSL MERKE WAE 
和 亮度 三 个 通道 的 颜色 ， 这 个 标准 几乎 包括 了 人 次 视 力 所 能 感 知 的 所 有 凑 色 ， 是 目前 运用 最 
广 的 颜色 系统 之 一 。 

语法 格式 : 

color: HSL(Hue , Saturation , Lightness) 

取 值 : 

(1) Hue: 表示 色调 。0 (或 360) 表示 红色 ，120 表示 绿色 ，240 表示 蓝 色 ， 还 可 取 其 他 
数值 来 确定 其 他 两 色 。 

(2) Saturation: 表示 饱和 度 。 取 值 为 0% 到 100% 之 间 。 

(3) Lightness: 表示 亮度 。 取 值 为 0% 到 100% 之 间 。 

举例 说 明 : 

下 面 的 代码 中 定义 了 两 个 div 元 素 ， 第 一 个 div 元 素 使 用 了 HSL 泻 染 其 背景 颜色 ， 第 二 
个 div 元 素 使 用 RGB 泻 染 其 背景 颜色 。 
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代码 清单 18-13: HSL 色彩 模式 演示 效果 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HSL</title> 
<style type="text/css"> 
Zdivl { 
width: 280px; 
height: 40px; 
font-size: 18px; 
background-color: hsl(360,80%,70%); 
color: white; } 
#div2 { 
width: 280px; 
height: 40px; 
font-size: 18px; 
background-color: red; 
color: white; } 
</style> 
</head> 
<body> 
<div id-"divl> 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! </div><br/> 
«div id="div2"> 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! <div> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-17 所 示 。 


€ > C | D813.hlyr | 


| 





图 18-17 HSL 色彩 模式 与 RGB 模式 对 比 效果 


18.3.2 HSLA colors 属性 


HSLA 色彩 模式 是 HSL 色彩 模式 的 扩展 ， 在 色相 、 饱 和 度 和 腕 度 三 要 素 的 基础 上 增加 
了 不 透明 度 参 数 的 Alpha 值 。 使 用 HSLA 色彩 模式 ， 设 计 人 员 能 够 更 灵活 地 设计 不 同 的 透 
HASC e 

语法 格式 : 

color: HSLA(Hue , Saturation , Lightness, Alpha) 
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取 值 : 
(1) Hue: 表示 色调 。0( 或 360) 表示 红色 ，120 表示 绿色 ，240 表示 赣 色 ， 还 可 取 其 他 








数值 来 确定 其 他 闫 色 。 


BH 





(2) Saturation: KWM. BEN 09631] 100967 M]. 

(3) Lightness: 表示 亮度 。 取 值 为 0% 到 100% 之 间 。 

(4) Alpha: 表示 透明 度 。 取 值 在 0 到 1 之 间 。 

举例 说 明 : 

下 面 的 实例 演示 了 通过 调整 HSLA (Hue, Saturation, Lightness, Alpha) 中 的 Alpha 值 设 
A 9355 Hj] BE 





代码 清单 18-14: 设置 背景 的 透明 度 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HSLA</title> 
<style type="text/css"> 
#hslal { 
background: hsla(240, 35%, 50%, 0.2); 
height: 20px; } 
#hsla2 { 
background: hsla(240, 35%, 50%, 0.4); 
height: 20px; } 
#hsla3 { 
background: hsla(240, 35%, 50%, 0.6); 
height: 20px; } 
#hsla4 { 
background: hsla(240, 35%, 50%, 0.8); 
height: 20px; } 
#hsla5 { 
background: hsla(240, 35%, 50%, 1.0); 
height: 20px; } 
</style> 
</head> 
<body> 
<div 1d="hslal"></div> 
<div 1d="hsla2"></div> 
<div 1d="hsla3"></div> 
<div 1d="hsla4"></div> 
«div id="hsla5"></div> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-18 所 示 。 
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图 18-18 HSLA 属性 设置 效果 


18.3.3 RGBA colors 属性 


RGBA 色彩 模式 是 RGB 色彩 模式 的 扩展 ， 在 红 、 绿 、 效 三 原色 的 基础 上 增加 了 不 透明 
度 参数 的 Alpha 值 。 使 用 RGBA 色彩 模式 ， 设 计 人 员 能 够 更 灵活 地 设计 不 同 的 透明 效果 。 

语法 结构 : 

color: RGBA(Red , Green , Blue, Alpha) 

IUBE: 

(1) Red: 红色 值 ， 可 取 正 整数 或 百分数 。 

(2) Green: 绿色 值 ， 可 取 正 整数 或 百分数 。 

(3) Blue: 篮 色 值 ， 可 取 正 整数 或 百分数 。 

(4) Alpha: ZHE, BEE 0—1 之 间 )。 

说 明 : 

RGB 色彩 模式 是 工业 界 的 一 种 颜色 标准 ， 是 通过 对 红 (Red), $E (Green), 9 (Blue) 三 
个 颜色 通道 的 变化 以 及 它们 相互 之 间 的 登 加 来 得 到 各 式 各 样 的 颜色 ，RGB 即 是 代表 红 、 
绿 、 监 三 个 通道 的 颜色 ， 这 个 标准 几乎 包括 了 人 类 视力 所 能 感知 的 所 有 颜色 ， 是 目前 运用 最 
三 的 磊 色 系统 之 一 。 

RGBA 在 RGB 的 基础 上 多 了 控制 alpha 透明 度 的 参数 。 以 上 Red, Green, Blue 三 个 参 
数 ， 正 整数 信 的 取 值 范围 为 0~~255。 百 分 比 数 值 的 取 值 郊 围 为 0.0 一 100.0%。 超 出 范围 的 数 
值 将 被 取 为 与 之 最 相近 的 仁 。 并 非 所 有 浏览 名 都 文 持 使 用 百分比 数 仁 。Alpha 参数 取 值 在 
0 一 1 之 间 ， 不 可 为 负 值 。 

举例 说 明 : 

下 面 的 实例 污 示 了 通过 调整 RGBA(Red、Green、Blue、Alpha) 中 的 Alpha 值 来 设置 背景 
的 透明 度 。 




















代码 清单 18-15: RGBA 色彩 模式 调整 透明 度 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>RGBA</title> 
<style type="text/css"> 
#rgbal 1 
background: rgba(255, 0, 0, 0.2); 
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height: 20px; } 
#rgba2 1 
background: rgba(255, 0, 0, 0.4); 
height: 20px; } 
#rgba3 1 
background: rgba(255, 0, 0, 0.6); 
height: 20px; } 
#rgba4 1 
background: rgba(255, 0, 0, 0.8); 
height: 20px; } 
#rgba5 1 
background: rgba(255, 0, 0, 1); 
height: 20px; } 
</style> 
</head> 
<body> 
<div id="rgba1 "></div> 
<div id="rgba2"></div> 
<div id="rgba3"></div> 
<div id="rgba4"></div> 
<div id="rgba5"></div> 
</body> 
</html> 








代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-19 所 示 。 


D RGBA ; 
€ > Q DHmMSUB3/18/18-15.ht $7 A 





图 18-19 RGBA 属性 设置 效果 


18.3.4 opacity 属性 


在 CSS3 中 ， 除 了 可 以 使 用 HSLA 和 RGBA 色彩 模式 调整 色彩 的 透明 度 外 ， 还 专门 定义 
了 opacity 属性， 通过 设置 该 属性 能 够 为 任何 元 素 设 置 透明 度 。 

语法 格式 : 

opacity: number 

WE: 

number: 使 用 浮 点 数 指定 对 象 的 不 透明 度 。 值 被 约束 在 0~1 的 范围 内 ， 如 果 超 过 了 这 
个 范围 ， 其 计算 结果 将 取 为 与 之 最 相近 的 值 。opacity 取 值 为 1 时 ， 对 象 是 完全 不 透明 的 ; 
反之 如 采取 值 为 0， 则 对 象 是 完全 透明 的 、 看 不 见 的 。1 到 0 之 间 的 任何 值 都 表示 该 元 素 的 
透明 程度 。 
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举例 说 明 : 


下 和 而 的 代码 中 指定 了 两 个 图 像 对 象 ， 第 一 个 图 像 对 象 通过 opacity 属性 被 设置 为 完全 不 
透明 ， 第 二 个 对 象 透明 度 设置 为 0.4。 





代码 清单 18-16: 使 用 opacity 设置 对 象 的 透明 度 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>opacity</title> 

«style type="text/css"> 
img.img]l { opacity:1; } 
img.img2 1 opacity:0.4; } 

</style> 

</head> 

<body> 


<img class 


LM EH 


img1" src-"1mages/0001.png" 


LM LM 


«img class-"img2" src-"images/0001 png" 
</body> 


</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-20 所 示 。 





图 18-20 “完全 不 透明 与 透明 度 为 0.4 的 对 比 效果 


|184 文本 属性 


CSS3 文本 属性 用 于 控制 文字 的 外 观 。 可 以 为 文本 添加 阴影 、 做 自动 换行 、 文 本 溢出 处 
理 每 。 本 方 将 详细 介绍 以 下 文本 属性 : 

E text-shadow 

E text-overflow 


E word-wrap 


18.4.1 text-shadow 属性 
在 CSS3 F, text-shadow 属性 用 于 指定 文本 阴影 。 使 用 该 属性 可 以 指定 文本 水 平 阴 影 、 
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3E EISE. WE AMH 

语法 格式 : 

text-shadow: h-shadow v-shadow blur color; 

WE: 

(C1) h-shadow: ix EOM III K Em. AAN RE. 

(2) v-shadow: KAW ZKI KE ELDER. "I AN PE. 

(3) blur: 设置 对 象 的 阴影 模糊 值 。 不 允许 负 值 。 

(4) color: 设置 对 象 的 阴影 颜色 。 

举例 说 明 : 

(1) 代码 清单 18-17 给 出 了 一 个 text-shadow 属性 的 使 用 实例 。 在 该 实例 中 给 一 段 文字 
添加 了 红色 的 阴影 ， 其 中 阴影 的 水 平 仿 移 量 与 焉 下 偶 移 量 均 为 7 个 像素 有 模糊 值 为 1。 














代码 清单 18-17: text-shadow 属性 的 使 用 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>text-shadow</title> 
<style type="text/css"> 
hl { 
text-shadow: 6px 7px 1px #F00; 
j 
</style> 
</head> 
<body> 
<h1> 爱 我 中 华 ! «hl» 
</body> 


</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-21 所 示 。 





图 18-21 text-shadow 效果 


(2) 可 以 使 用 text-shadow 属性 一 次 性 为 文字 指定 多 个 阴影 ， 并 且 针 对 每 个 阴影 添加 不 
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同 的 闫 色 和 模糊 值 。 指 定 多 个 阴影 需要 使 用 去 写 将 多 个 阴影 进行 分 割 。 





代码 清单 18-18: 为 文字 指定 多 个 阴影 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>text-shadow</title> 
<style type="text/css"> 
hl { text-shadow: 17px 17px 2px #F00, 40px 40px 3px #0F0, 60px 60px 4px #00F; } 
</style> 
</head> 
<body> 
<h1> 爱 我 中 华 ! «hl» 
</body> 
</html> 





AU E Chrome 浏览 器 中 的 显示 效果 如 图 18-22 PZR. 





图 18-22 多 个 阴影 效果 


18.4.2 text-overflow 属性 


在 CSS3 F, text-overflow EE me 否 使 用 一 个 省 略 标 记 ...) 标示 对 象 内 

one 这 个 属性 仅 作用 于 水 平 内 联 方向 的 、 普 通 的 西方 文本 的 溢出 ， 内 联 溢出 发 生 在 
行内 的 文本 超出 可 用 宽度 却 疫 有 换行 机 会 的 时 候 。 

语法 结构 : 

text-overflow: clip | ellipsis; 

WE: 

(1) clip: 不 显示 省 略 标 记 ...)， 而 是 直接 裁 切 。 

(2) ellipsis: 当 对 象 内 文本 游 出 时 显示 省 略 标记 C...) 

text-overflow 属性 仅 是 注解 ， 当 文本 游 出 时 是 否 显 示 省 略 标 记 ， 并 不 具备 其 他 样式 属性 
定义 。 想 要 实现 淤 出 时 产生 省 略 写 的 效果 。 还 必须 定义 : 强制 文本 在 一 行内 显示 Cwhite- 
space:nowrap) K wih AAN Beji (overflow:hidden )。 只 有 这 样 才能 实现 洪 出 文本 显示 省 略 
写 的 效果 。 
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举例 说 明 : 


代码 清单 18-19: 设置 文本 的 省 略 标记 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>text-overflow</title> 
<style type="text/css"> 
div { 
white-space:nowrap; 
overflow:hidden; 
border:1px solid #00F; 
width:250px; } 
#div1 { text-overflow:clip; } 
#div2 { text-overflow:ellipsis; } 
</style> 
</head> 
<body> 
<h3>text-overflow:clip</h3> 
<div id="div1">This is some long text that will not fit in the box</div> 
«h3»text-overflow:ellipsisc/h3- 
«div id-"div2"7 This is some long text that will not fit in the box</div> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-23 所 示 。 


melZ 






TT 


€ > C |D file:///D:/AHTML5E v? | 


text-overflow:clip 


is is some long text that wi 


text-overflow:ellipsis 


图 18-23 ”设置 文本 的 省 略 标记 


18.4.3 word-wrap 属性 


浏览 右 不 能 对 较 长 的 单词 目 动 进行 换行 。 当 文学 长 度 超 出 容 堪 宽度 时 ， 文 学 会 回 容 右 外 部 
扩展 。 在 CSS3 F, word-wrap 属性 用 于 设置 当前 行 超过 指定 容 右 的 边界 时 是 否 断 开 转 行 。 

语法 结构 : 

word-wrap: normal | break-word; 

取信 : 

(1) normal: IIF N Zt h PR E TERR3I 7r e 
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(2) break-word: 允许 内 容 在 边界 六 换 行 。 如 末 需 要 ， 单 词 凡 部 允许 断 行 。 
word-wrap 属性 值 可 以 使 用 normal 与 break-word。 使 用 normal 时 ， 浏 览 器 保持 默认 处 
FE; 使 用 break-word 时 ， 人 允许 长 单词 日 动 换行 。 


代码 清单 18-20: word-wrap 属性 实现 长 单词 自动 换行 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>word-wrap</title> 
<style type="text/css"> 
div { width: 250px; border: 1px solid #000000; } 
#div1 { word-wrap: normal; | 
#div2 { word-wrap: break-word; } 
</style> 
</head> 
<div id="div1"> long word: thisisaveryveryveryveryveryverylongword. The long word can not break and 
wrap to the next line.</div><br/> 
<div id="div2"> long word: thisisaveryveryveryveryveryverylongword. The long word will break and 
wrap to the next line</div> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-24 所 示 。 
ee Es Ef € 





long word: 

thisisaveryvervyvervyveryveryvery 

he long word can not break and 
p to the next line. 


long word: 
thisisaveryveryveryveryveryvery 
longword. The long word will 

ap to the next line 


图 18-24 ”长 单词 的 自动 换行 
18.4.4 word-break 属性 


在 CSS3 中 ，word-break 属性 用 于 设置 对 象 内 文本 的 字 内 换行 行为 。 尤 其 在 出 现 多 种 语 
言 时 。 对 于 中 文 应 该 使 用 break-all。 

语法 结构 : 

word-break : normal | break-all | keep-all 

PR: 

(1) normal: 依照 亚洲 语言 和 非 亚 洲 语 言 的 文本 规则 ， 人 允许 在 池内 换行 。 
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(2) break-all: 该 行为 与 亚洲 语言 的 normal 相同 。 也 人 允许 非 亚 洲 语 言 文本 行 的 任意 字 
靳 开 。 该 值 适合 包含 一 些 非 亚洲 文本 的 亚洲 文本 。 人 允许 单词 内 换行 。 

(3) keep-all: 与 所 有 非 亚 洲 语 言 的 normal 相同 。 对 于 中 文 、 哇 文 、 日 文 ， 不 允许 字 断 
开 。 适 合 包含 少量 亚洲 文本 的 非 亚洲 文本 。 通 第 在 半角 空格 或 连接 字符 处 换行 。 

Vi HJ: 

CI) 对 于 Internet Explore 浏览 器 而 言 ， 当 word-break 值 为 break-all 时 ， 不 允许 标点 符号 
位 于 行 首 ; 当 word-break 值 为 keep-all 时 ， 只 人 允许 半角 衬 格 或 连接 字符 处 换行 。 

(2) HAT, Safari 浏览 器 与 Chrome 浏览 右 不 文 持 keep-all 属性 值 。 

(3) 当 word-break 属性 值 为 break-all 时 ， 人 允许 非 亚洲 语言 文本 行 的 任意 单词 换行 。 

(4) 对 于 标点 符号 来 说 ， 当 word-break 属性 值 为 break-all 时 ，Safari 浏览 器 与 Chrome 
浏览 器 允许 标点 符号 位 于 行 首 。 

举例 说 明 : 





























代码 清单 18-21: word-break 属性 实现 换行 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>word-break</title> 
<style type="text/css"> 
#div1 { word-break: break-all; } 
#div2 { word-break: keep-all; } 
</style> 
</head> 
«div id="div1">keep-all. 对 于 CKJ 文 ， 不 允许 字 断 开 。 适 合 包 含 少量 亚洲 文本 的 非 亚 洲 文本 ; 
break-all 允许 非 亚 洲 语 言 文本 行 的 任意 字 内 断 开 。 该 值 适 合 包含 一 些 非 亚 洲 文 本 的 亚洲 文字 。 
</div><br> 
«div id="div2">keep-all. 对 于 CKJ 文 ， 不 允许 字 断 开 。 适 合 包 含 少量 亚洲 文本 的 非 亚 洲 文 本 ; 
break-all 允许 非 亚 洲 语 言 文本 行 的 任意 字 内 断 开 。 该 值 适 合 包含 一 些 非 亚洲 文本 的 亚洲 文字 。 
</div> 
</body> 
</html> 























代码 在 正 浏 览 器 中 的 显示 效果 如 图 18-25 所 示 。 


CE 


pes RAE ”查看 (V) 收藏 去 (A】 工具 (T) ”帮助 (H) 


keep-all H} T CKJ X : -TCHE BET GÉEBECSEISJ MEE ICH E: break-all?t 
TEEdJEHEBEXGÓEÉTBIGcHESJTPO 该 值 适合 包含 一 些 非 泪 洲 训 本 的 焉 洲 朗 字 。 


keep-all 对 于 CEJ 廊 ， 不 容许 字 断 开 。 适合 包 合 少量 亚洲 训 本 的 非 王 洲 训 本 3 break- 
adn EEH XETAFE FAAA. 该 值 适 合 包 含 一 些 非 亚 浏 文本 的 亚洲 文字 * 





图 18-25  word-break 设置 换行 效果 
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| 18.5 ”字体 属性 


在 CSS3 之 前 ， 网 页 设计 人 员 使 用 的 季 体 必须 已 经 安装 在 客户 端 计算 机 上 ， 在 样式 表 中 
指定 当前 字体 不 能 正 钊 显示 时 ， 使 用 代替 字体 。 但 是 如 朱 字 体 和 代 蔡 字体 在 客户 痕 计 算 机 上 
均 没 有 安装 ， 束 造成 了 这 个 字体 文子 不 能 正常 显示 。 

为 了 解决 这 一 问题 ，CSS3 中 增加 了 服务 器 中 字体 功能 。 网 页 设计 人 员 可 以 使 用 服务 需 
闹 的 任何 字体 ， 而 个 必 担 心 凶 体 文子 人 不 能 正 沼 显示 的 问题 。 




















18.5.1 Gfont-face 属性 


使 用 @font-face JU BE JI lb ar d I SOC TES LETEJ i hz e) Wi TC 1 eee E 
字体 。 
语法 格式 : 
(font-face 1 
font-family: «YourWebFontName»^; 














src: «source» [«format^ ]|,csource» [«format^ ]]*; 
[font-weight: «weight» |; 
[font-style: <style>]; 
font-size: «size»? ]; 
[font-stretch: «stretch» |; 
[font-variant: «variant? |; 
j 
WE: 
(1) font-family: 设置 文本 的 字体 名 称 。 
(2) font-style: 设置 文本 样式 。 
(3) font-variant: 设置 文本 是 否 大 小 写 。 
(4) font-weight: 设置 文本 的 粗细 。 
(5) font-stretch: 设置 文本 是 否 横 问 拉 伸 变形 。 
(6) font-size: 设置 文本 字体 大 小 。 
CI) sre: 设置 日 定义 字体 的 相对 路 径 或 者 绝对 路 径 。 注 意 ， 此 属性 只 能 在 @font-face 规 
则 里 使 用 。 


18.5.2 ”字体 格式 


由 于 不 同 的 浏览 器 对 字体 的 格式 支持 不 一 人 怕 ， 因 此 在 设置 学 体 属性 时 需要 考虑 浏览 器 对 
@font-face 的 兼容 性 问题 。 下 面 对 各 种 浏览 器 支持 什么 样 的 字体 格式 进行 镜 蛙 介 绍 。 

1. TrueType (ttf) 格式 

ttf 字体 是 Windows 和 Mac 中 最 常见 的 字体 ， 是 一 种 RAW 格式 ， 因 此 它 不 为 网 站 优 
化 。 支 持 这 种 字体 的 浏览 器 有 : IE9+、Firefox3.5+、Chrome4+、Safari3+、Operal0+、iOS 
Mobile Safarl4.2 十 。 
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2. OpenType(.otf 格 式 

otf TARUN EP RRITA WARE TrueType 的 基础 上 ， 所 以 也 提供 了 更 
多 的 功能 。 文 持 这 种 字体 的 浏览 郁 有 : Firefox3.$S+、Chrome4.0+、Safari3.1+、Operal10.0+、 
10S Mobile Safari4.2+。 

3. Web Open Font Format(.woff) 格 式 

.Woff 字体 是 Web 字体 中 的 最 佳 格式 ， 它 是 一 个 开放 的 TrueType/OpenType 的 压缩 版 
本 ， 同 时 也 文 持 元 数据 包 的 分 离 。 文 持 这 种 字体 的 浏览 器 有 : IE9+、 Firefox3.5+、 
Chrome6-. Safari3.6*. Operall.l1-. 

4. Embedded Open Type(.eot) 4& X 

eot 字体 是 IE 专用 字体 ， 可 以 从 TrueType CEHI TIE. SXCRESUMCE FSIBJDU Pa. 1H. 
有 IE4+。 

5. SVG(svg) 格 式 

.SVg 字体 是 基于 SVG 字体 渔 染 的 一 种 格式 。 文 持 这 种 字体 的 浏 唤 右 有 : Chrome4-. 
Safari3.1+、Operal0.0+、1OS Mobile Safari3.2+. 

在 @font-face 中 全 少 需 要 .wo 和 华 与 .eot 两 种 格式 字体 ， 甚 全 还 需要 .svg 等 字体 达到 更 多 种 
浏览 器 版 本 有 的 支持 。 

为 了 让 更 多 的 浏览 右 文 择 ，@font-face 可 以 写成 : 


(font-face 1 














font-family: 'YourWebFontName'; 
src: url('YourWebFontName.eot?') format('eot);/*IE*/ 


src:url('YourWebFontName.woff ) format( woff ), url( YourWebFontName.ttf) format('truetype);/*non-IE*/ 


18.5.3 ”应 用 举例 


前 面 介绍 了 @fontrface 的 使 用 方法 和 字体 格式 ， 接 下 来 在 代码 清单 18-22 中 看 一 个 使 用 
服务 器 字体 的 实例 。 可 以 在 网 址 http://cooltext.com/Fonts 下 载 目 己 喜欢 的 字体 格式 。 
举例 说 明 : 


代码 清单 18-22: word-break 属性 实现 换行 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>@font-face</title> 
<style type="text/css"> 
(font-face { 
font-family: MyWebFont; 
src: url('font/rechtman.eot?') format('eot);/*IE*/ 


src: url('font/rechtman.woff' ) format('woff), url('rechman.ttf) format('truetype;/*non-IE*/ 
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div { 
font-family: MyWebFont; 
font-size: 36px; 
font-weight: bold; 

j 

</style> 

</head> 

<body> 

<div>Made In China!</div> 

</body> 

</html> 





代码 在 Chrome ÙX was P A RARUA] 18-26 所 示 。 





图 18-26 @font-face 应 用 举例 


| 18.6 ”用户 界面 属性 


i 


? 





在 CSS3 "b, rn T EAHA ZHBUREPERRS US SETA NE. HERTAN. TEARS 
该 者 将 了 解 以 下 的 用 户 界 面 属性 : 
B box-sizing 





E resize 

E outline-offset 
B nav-index 

B nav-up 

B nav-right 

WB nav-down 

EB nav-left 


18.6.1 box-sizing 属性 





box-sizing R EH T EAE CERTI f UV ZH V 7] 3X o 

语法 格式 : 

box-sizing: content-box | border-box : 

BUB: 

(1) content-box: padding 和 border 不 被 包含 在 定义 的 width 和 height 之 内 。 对 象 的 实际 


宽度 等 于 设置 的 width. border 和 padding 之 和 ， 即 Element width = width + border + padding. 
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(2) border-box: padding 和 border 被 包含 在 定义 的 width 和 height 之 内 。 对 和 象 的 实际 宽 
度 就 等 于 设置 的 width 值 ， 即 使 定义 了 border 和 padding 也 不 会 改变 对 象 的 实际 宽度 ， 即 
Element width = width. 

举例 说 明 : 

为 了 进一步 说 明 content-box 与 border-box 的 区 别 ， 可 对 box-size 进行 如 下 设置 : 


content-box: 














testl { box-sizing:content-box; width:200px; padding:10px; border:15px solid #00F; } 
border-box:: 
test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #00F; | 


得 到 对 比 效果 ， 如 图 18-27 所 示 。 


border 15. 
"ERES border i5] 
paddi ng 10 
ME— 3d 4E—3» Ese + 


EH 1E me 


15 | 10 150 x 20 10 | 15 


3 Th 


15 | 10 200 x 7ü 10 | 15 


15 15 l | 
width:250 | | width:200 


图 18-27 content-box 与 border-box 设置 对 比 


代码 清单 18-23: 使 用 box-sizing 改变 容器 的 盒 模型 组 成 方式 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>box-sizing</title> 

<style type="text/css"> 

test { 
width: 200px; 
height: 70px; 
padding: 10px ; 
border: 15px solid #00F; 
-webkit-box-sizing: content-box; 
-moz-box-sizing: content-box; 
-ms-box-sizing: content-box; 
box-sizing: content-box; 
background: ZFF0; | 

test2 1 
width: 200px; 
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height: 70px; 
padding: 10px; 
border: 15px solid Z00F; 
-Webkit-box-sizing: border-box ; 
-moz-box-sizing: border-box; 
-ms-box-sizing: border-box; 
box-sizing: border-box ; 
background: ZFF0; } 

</style> 

</head> 

<body> 

<div class="test">content-box</div><br> 

<div class="test2">border-box</div> 

</body> 

</html> 


A 友情 提示 

对 于 webkit ^14Z3 95,25 ( Chrome/Safari )， 写 法 为 : -webkit-box-sizing; 对 于 Gecko 内 核 浏 
览 器 (Firefox )， 写 法 为 : -moz-box-sizing; 对 于 Trident 内 核 浏 览 器 (了 正 )， 写 法 为 : -ms-box- 
sizing(IES)/box-sizing(IE9); 对 于 Presto 内 核 浏 览 器 〈Opera )， 写 法 为 : -o-box-sizing/box-sizing. 


18.6.2 resize JESTE 


resize 属性 用 于 设置 对 象 的 区 域 是 否 允 许 用 户 缩 放 、 调 节 元 素 尺 寸 大 小 。 如 来 布 望 此 属 
性 生效 ， 需 要 设置 对 象 的 overflow 属性 ， 值 可 以 是 auto. hidden 或 scroll。 目 前 只 有 Chrome 
浏览 器 和 Safari 浏览 器 支持 此 属性 。 

语法 格式 : 

resize: none | both | horizontal | vertical 

取 值 : 

(1) none: 不 允许 用 户 调 整 元 系 大 小 。 

(2) both: 提供 双 回 尺寸 调整 机 制 ， 让 用 户 可 以 调节 元 素 的 宽度 和 局 度 。 

(3) horizontal: 提供 单 问 水 平 尺寸 调整 机 制 ， 让 用 户 可 以 调节 元 素 的 宽度 。 

(4) vertical: 提供 单 癌 王 直 人 寸 调整 机 制 ， 让 用 户 可 以 调节 元 又 的 高 度 。 

举例 说 明 : 
































代码 清单 18-24: 用 户 可 双向 调整 对 象 尺 十 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>resize</title> 
<style type="text/css"> 
div { 
background:url(images/bfl.png); 
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border: 2px solid; 
padding: 4px 4px; 
width: 170px; 
resize: both; 
overflow: auto; } 

</style> 

</head> 

<body> 

<div>The resize property specifies whether or not an element is resizable by the user.</div> 

</body> 

</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-28 所 示 。 


| | resize 


人 024 him| ES [eene D. sez niam rE 





图 18-28 resize 用 户 缩 放 效 果 


18.6.3 outline-offset 属性 





outline-offset PJ PAVESE Elba A ARA, BI ELUS SEP ME 5 TERR VIZATIURR ES o 
语法 格式 : 


outline-offset: <length> 











取 值 : 
length 表示 用 长 度 值 来 定义 轮廓 俩 移 。 不 允许 负 值 。 
举例 说 明 : 


代码 清单 18-25: 绘制 轮廓 边框 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>outline-offset</title> 
<style type="text/css"> 
div { 
margin: 20px; 
width: 200px; 
padding: 10px; 
height: 50px; 
border: 2px solid black; 
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outline-offset: 15px; 
outline: ZF00 solid 2px; 
j 
</style> 
</head> 
<body> 
<div> 绘 制 轮廓 边框 </div> 
</body> 
</html> 








代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-29 所 示 。 
| renes 





绘制 轮 廊 边框 





图 18-29 绘制 轮廓 边框 


18.6.4 nav-index 属性 


nav-index 属性 是 HTML4/XHTML1 中 tabindex 属性 的 替代 品 ， 从 HTML4 引入 并 参考 了 
HTMLA 的 建议 做 了 轻微 的 修改 。 

该 属性 为 当前 元 妈 指 定 了 其 在 当前 文档 中 导航 的 序列 号 。 导 所 的 序列 扎 指定 了 页 面 中 元 
素 通过 键盘 操作 获得 焦点 的 顺序 。 该 属性 可 以 存在 于 般 套 的 页 面 元 素 当 中 。 

为 了 使 user agent 能 按 顺 序 获 取 焦 点 ， 页 面 元 北 需要 遵循 如 下 规则 : 

CI) 该 元 素 文 持 nav-index 属性 ， 而 被 赋予 正 整 数 属性 值 的 元 素 将 会 被 优先 导航 。user 
agent 将 按照 nav-index 属性 值 从 小 到 大 进行 导航 。 属 性 值 无 须 按 次 序 ， 也 无 顷 以 特定 的 值 开 
始 。 拥 有 同一 nav-index 属性 值 的 元 素 将 以 它们 在 字符 流 中 出 现 的 顺序 进行 导航 。 

(2) 对 那些 不 支持 nav-index 属性 或 者 nav-index 属性 值 为 auto 的 元 素 将 以 它们 在 字符 流 
中 出 现 的 顺序 进行 导航 。 

G) 对 那些 蓉 用 的 元 素 ， 将 不 参与 导航 的 排序 。 

语法 格式 : 

nav-index :auto | «number? | inherit 

WE: 

CI) auto: DU T AREA VJ 

(2) number: 该 数字 OV EERO 指定 了 元 素 的 导航 顺序 。 数 字 “1” 意 味 看 最 先 
和 被 导航 。 当 大 干 个 元 素 的 nav-index 值 相同 时 ， 则 按照 文档 的 先后 顺序 进行 导航 。 

(3) inherit， 默 认 继承 。 
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举例 说 明 : 


代码 清单 18-26: 定义 导航 序列 号 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>nav-index</title> 
<style> 
button { position: absolute; } 
button#b1 { 
top: 0; 
left: 50%; 
nav-index: 1; } 
button#b2 { 
top: 50%; 
left: 100%; 
nav-index: 2; } 
button#b3 { 
top: 100%; 
left: 50%; 
nav-index: 3; | 
button#b4 { 
top: 50%; 
left: 0; 
nav-index: 4; } 
</style> 
</head> 
<body> 
<button id="b1">Button 1</button> 
<button id="b2">Button2</button> 
<button id="b3">Button3</button> 
<button id="b4">Button4</button> 
</body> 
</html> 


18.6.5. 4g XJ IRI BET RU 


输入 设备 默认 使 用 四 个 方 问 键 根据 文档 顺序 依次 来 控制 元 素 的 焦点 切换 ， 但 为 了 使 用 户 
体验 更 好 ，CSS3 提供 了 定义 切换 焦点 的 控制 顺序 方向 。 它 主要 由 四 个 属性 配合 实现 。 

CI) nav-up: 控制 同上 方 同 键 。 

(2) nav-right: PEA A H E. 

(3) nav-down: fim] P7; [n] 8. 

(4) nav-left: 控制 问 左 方 癌 键 。 
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语法 格式 : 

nav-up: auto | «id» [ current | root | <target-name> |? | inherit 

nav-down: auto | «id» [ current | root | «target-name^ ]? | inherit 

nav-right: auto | «id^ [ current | root | «target-name» |? | inherit 

nav-left: auto | «id^ | current | root | «target-name»^ ] | inherit 

BUB 

C1) auto: 根据 浏览 器 默认 的 顺 友 切换 。 

(2) id: 要 切换 元 系 的 ID 名 。 

(3) root | «target-name»: 这 个 参数 不 能 以 ″” ”命名 ， 指 出 frameset 目标 页 面 之 间 
的 元 系 焦 点 切换 。 如 采 指 定 的 目标 页 面 不 存在 ， 则 被 视 为 当前 页 面 的 焦点 ， 意 味 看 完全 
KRIER DR o BEARER “root” PRR, A ARKEA frameset HER WEN 
目标 。 

(4) inherit: 默认 继承 。 

举例 说 明 : 

nav-up. nav-right, nav-down. nav-left 与 上 一 市 介绍 的 nav-index 在 实际 网 站 开发 中 并 
不 各 用 。 各 种 浏览 句 对 其 文 持 程 度 也 不 够 好 。 下 面 的 实例 中 定义 了 四 个 按钮 ， 通 过 键盘 的 方 
问 键 控制 按钮 焦点 的 切换 。 


























代码 清单 18-27: 定义 键盘 方向 键 控制 顺序 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>nav</title> 
<style type="text/css"> 
button { position: absolute; } 
button#b1 { 
top: 0; 
left: 50%; 
nav-index: 1; 
nav-right: #b2; 
nav-left: #b4; 
nav-down: #b2; 
nav-up: #b4; | 
buttonzb2 | 
top: 50%; 
left: 100%; 
nav-index: 2; 
nav-right: #b3; 
nav-left: #b1; 
nav-down: £b3; 


nav-up: £bl; } 
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button#b3 { 

top: 100%; 

left: 50%; 

nav-index: 3; 

nav-right: #b4; 

nav-left: Zb2; 

nav-down: £b4; 

nav-up: £b2; } 
button#b4 { 

top: 50%; 

left: 0; 

nav-index: 4; 

nav-right: #b1; 

nav-left: #b3; 

nav-down: #b1; 

nav-up: £b3; | 
</style> 
</head> 
<body> 
«button id="b1">Button 1</button> 
<button id="b2">Button2</button> 
<button id="b3">Button3</button> 
<button id="b4">Button4</button> 
</body> 
</html> 


| 18.7 ”基础 使 模型 


基础 例 模 型 包括 下 面 三 个 属性 。 这 三 个 属性 都 用 来 
如 何 进 行 显示 。 

Bi overflow 

B overflow-x 


B overflow-y 


18.7.1 overflow 属性 











要 显示 的 内 容 在 盒 


容 不 下 时 


overflow 属性 是 在 CSS2 中 定义 的 属性 。 在 CSS3 中 ， 可 以 使 用 overflow 属性 指定 盒 中 
容纳 不 下 的 内 容 的 显示 方法 。 目 前 浏览 器 已 经 能 够 很 好 地 支持 该 属性 。 








语法 格式 : 

overflow: visible | auto | hidden | scroll 
BUB: 

(1) visible: ABU A RENER AR e 
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(2) auto: 在 需要 时 剪 切 内 容 并 添加 滚动 条 ， 此 为 body 对 象 和 textarea 的 默认 值 。 
(3) hidden: 不 显示 超过 对 象 尺寸 的 内 容 。 
(4) scroll: 总 是 显示 滚动 条 。 





A 友情 提示 

对 于 table 来 说 ， 假 如 table-layout 属性 设置 为 fixed， 则 td 对 象 支持 带 有 默认 值 为 
hidden 的 overflow 属性 。 如 果 设 为 hidden、scroll 或 auto, ARZE td 尺寸 的 内 容 将 被 前 
切 。 如 果 设 为 visibleg， 将 导致 额外 的 文本 溢出 到 右边 或 左边 ( 视 direction 属性 设置 而 定 ) 的 
单元 格 。 

举例 说 明 : 

overflow 属性 用 于 设置 当 对 象 的 内 容 超 过 其 指定 高 度 及 宽度 时 如 何 管理 内 容 。 其 处 理 方 
式 包 括 visible, auto. hidden 和 scrolle P HAJRIE EZR J aE hidden 5 scroll 对 超 
XT ke reg EIC ET DUET] ABRE 











代码 清单 18-28: 使 用 hidden 5 scroll 值 对 超过 指定 高 度 及 宽度 的 处 理 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>overflow</title> 
<style type="text/css"> 
div { 
margin: 10px; 
border: 2px solid #00F; 
width: 300px; 
height: 60px; } 
#div1 { overflow: scroll; } 
#div2 { overflow: hidden; } 
</style> 
</head> 
<body> 
«div id="divl"> 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 
爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 
中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 
华 ! 爱 我 中 华 ! 爱 我 中 华 ! 
</div> 
«div id="div2"> 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 
爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 
中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 华 ! 爱 我 中 
华 ! 爱 我 中 华 ! 爱 我 中 华 ! 
</div> 
</body> 
</html> 
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ARII Chrome 浏览 器 中 的 显示 效果 如 图 18-30 所 示 。 





二 全 Pe 爱 我 中 华 ! EU 爱 我 中 华 ! 





图 18-30 overflow 属性 值 为 scroll 和 hidden 效果 


18.7.2. overflow-x 与 overflow-y 属性 


CSS3 AER ip 7 HIT ELS SS] I TROER IEEE 8 xe e 1E I9; BEST AU RE ES ER VIAE e 
overflow-x 属性 定义 水 平方 回 内 容 洲 出 时 的 设置 方式 ，overflow-y 属性 定义 垂直 方 癌 内 容 游 
出 时 的 设置 方式 。 

语法 格式 : 


overflow-x: visible | hidden | scroll | auto | no-display | no-content; 








overflow-y: visible | hidden | scroll | auto | no-display | no-content; 

取 值 : 

(1) visible: 不 二 切 内 容 也 不 添加 深 动 条 。 

(2) auto: 在 需要 时 剪 切 内 容 并 添加 深 动 条 ， 此 为 body XJ] Zl textarea 的 默认 值 。 

(3) hidden: 个 显示 超过 对 象 尺 寸 的 内 容 。 

(4) scroll: 内 容 超 出 元 素 尺 寸 时 ，overflow-x 显示 为 模 同 滚动 条 ， 而 overflow-y 显示 为 
EARJE. 

(5) no-display: 当 内 容 超出 元 素 尺 寸 时 不 显示 元 素 ， 此 时 类 似 添 加 了 display:none 

















(6) no-content: 当 内 容 超 出 元 素 尺 寸 时 不 显示 内 容 ， 此 时 类 似 添 加 了 visibility:hidden 
声明 。 


A 友情 提示 

根据 CSS3 基础 模型 草案 规范 ，overflow-x 与 overflow-y 的 计算 值 与 所 设置 的 值 应 该 相等 ， 
除非 这 对 值 不 合理 。 如 果 其 inier 隆 值 被 设置 成 了 auto £X Scrfoll， 而 另 一 个 属性 值 为 visible; 
那么 visible 会 被 设置 成 auto。 如 果 overflow-x 与 overflow-y 属性 值 相同 ， 则 overflow 的 计算 值 
与 前 两 者 的 指定 值 相 同 。 否 则 ， 它 的 值 是 一 个 overflow-x 与 overflow-y 的 计算 值 对 。 

当 overflow-x 或 overflow-y 属性 值 中 的 一 个 为 hidden、 田 一 个 为 visible 时 ， 则 该 元 素 最 
AÈ RAEM HÆ overflow-y 或 overflow-x 属性 值 依 浏览 器 而 定 。IE 浏览 器 使 用 hidden， 其 他 
浏览 器 使 用 auto. 
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代码 清单 18-29: 值 为 scroll 时 ，overflow-x 与 overflow-y 效果 
<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 


举例 说 明 : 


<title>overflow-x 与 overflow-y</title> 
«style type="text/css"> 
.divl { 
overflow-x: scroll; 
height: 100px; 
width: 150px; 
border: 1px solid ZF00; 
float: left; } 
.div2 1 
overflow-y: scroll; 
height: 100px; 
width: 150px; 
border: 1px solid ZF00; 
float: right; ! 
</style> 
</head> 
<body> 
<div style="width:320px"> 
«div class="div1"> 横 问 显示 深 动 条 </div> 
«div class="div2"> 纵 问 显示 深 动 条 </div> 
</div> 
</body> 
</html> 













































































代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-31 所 示 。 


€ > QD S1829htm|7;| 三 
NETTE ETE | B EHE 





图 18-31 1&7 scroll f, overflow-x 与 overflow-y 的 效果 
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18.8 多 栏 属性 


在 CSS3 之 前 的 版 本 中 ， 如 果 进 行 网 页 的 多 栏 布局 ， 网 页 设计 人 员 主 要 使 用 float 属性 和 
position 属性 。float 属性 布局 灵活 ， 但 是 容易 友 生 铬 位 ， 影 啊 页 面 的 整体 效 末 。 这 一 方式 需 
要 设计 人 员 编 写 大 量 的 附加 样式 代码 。position 属性 布局 方式 可 以 实现 精确 定位 ， 但 是 无 法 
满足 模块 化 的 日 适应 能 力 ， 以 及 模块 间 文 档 的 联动 需要 。 

为 了 解决 上 述 问题 ，CSS3 增加 了 多 栏 属性 。 利 用 多 栏 属性 可 以 自动 将 内 容 按 指定 的 列 
数 排 列 。 


18.8.1 columns 属性 



































columns 是 多 栏 属性 中 的 基本 属性 ， 为 复合 属性 。 访 属性 可 以 同时 定义 对 象 的 列 数目 和 
每 列 的 宽度 。 

语法 格式 : 

columns: column-width | column-count 


取 值 : 

(1) column-width: 设置 对 象 每 列 的 宽度 ， 请 参阅 column-width 属性 。 

(2) column-count: i BORA, Wi column-count 属性 。 

D 友情 提示 

对 于 WebKit 内 核 (Chrome/Safari ) 的 浏览 器 而 言 ， 设 置 边 框 颜 和 色 时 需要 加 上 *-moz-" 


人 
前 级 。 例 如 “-moz-columns”。 


举例 说 明 : 


在 传统 的 报纸 或 杂志 中 ， 文 章 通 党 是 多 栏 显 示 。 这 样 既 方 便 阅 读 ， 在 排版 上 也 美观 。 本 
实例 将 通过 columns 属性 实现 文章 的 多 栏 显 示 。 

















代码 清单 18-30: 设置 文章 多 栏 的 显示 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>columns</title> 
<style type="text/css"> 
body { 
columns: 100px 3; 
-webkit-columns: 100px 3; /* Safari and Chrome */ 
-moz-columns: 100px 3; /* Firefox */ 
j 
hl { 
margin: Opx; 
background: ZFCO; 
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CSS3 属性 


padding: 5px 8px; 

font-size: 20px; 

text-align: center; } 

h2 1 

text-align: center; 

font-size: 14px; } 

pí text-indent: 2em; } 

</style> 

</head> 

<body> 

<h1>%%</h1> 

<h2> 朱 目 清 </h2> 

<p> 菩 子 去 了 ， 有 再 来 的 时 候 ; 杨柳 村 了 ， 有 再 青 的 时 候 ; 桃花 谢 了 ， 有 再 开 的 时 候 。 但 是 ， 陪 
明 的 ， 你 告诉 我 ， 我 们 的 日 子 为 什么 一 去 不 复 返 呢 ? Ar I 1: 那 是 谁 ? IRE 
处 呢 ? 是 他 们 目 己 逃走 了 村: 现在 又 到 了 哪里 呢 ? </p> 

<> ”我 不 知道 他 们 给 了 我 多 少 日 子 ; 但 我 的 手 确 乎 是 渐渐 空 碟 了 。 在 默默 里 算 着 ， 八 干 多 日 子 
己 经 从 我 手中 溜 去 ; 像 针 尖 上 一 注水 满 在 大 海里 ， 我 的 日 子 滴 在 时 间 的 流 里 ， 没 有 声音 ， 也 没有 
影子 。 我 不 禁 头 小 小 而 泪 洲 洲 了 。</p> 

<p> 去 的 尽管 去 了 ， 来 的 尽管 来 者 ， 去 来 的 中 间 ， 又 怎样 地 匆匆 呢 ? 早上 我 起 来 的 时 候 ， 小 屋 里 
射 进 两 三 方 斜 笠 的 太阳 。 太 阳 他 有 脚 呵 ， 轻 轻 悄 悄 地 挪移 了 ;我 也 茫茫 然 跟 看 旋转 。 于 是 一 一 洗 
手 的 时 候 ， 日 子 从 水 贫 里 过 去 ;吃饭 的 时 候 ， 日 子 从 饭 左 里 过 去 ;默默 时 ， 便 从 凝 然 的 双眼 前 过 
去 。 我 觉察 他 去 的 匆匆 了 ， 伸 出 手 让 的 时 ， 他 又 从 扯 挽 着 的 手边 过 去 ， 天 黑 时 ， 我 腾 在 床上 ， 他 
便 伶 伶俐 俐 地 从 我 号 上 路 过 ， 从 我 脚 边 去 了 。 等 我 睁 开眼 和 太阳 再 见 ， 这 算 又 溜 走 了 一 日 。 我 
掩 着 面 叹 县 。 但 是 新 来 的 日 子 的 影 儿 又 开始 在 叹 县 里 内 过 了 。 </p> 

<p> 在 逃 去 如 飞 的 日 子 里 ， 在 千 门 万 户 的 世界 里 的 我 能 做 些 什 么 呢 ? EORR T, RAIA 
了 ;在 八 千 多 日 的 匆匆 里 ， 除 徘徊 外 ， 又 剩 些 什 么 呢 ? XIZIBUECTYONUERAM, ANAMUXSANEI, um 
筋 ， 被 初 阳 共 融 了 ;我 留 着 些 什 么 痕迹 呢 ? 我 何曾 留 独 像 游 丝 样 的 痕迹 呢 ? 我 亦 裸 裸 来 到 这 世 
To FEIRER IRRE? 但 不 能 平 的 ， 为 什么 偏 要 日 日 走 这 一 遭 啊 ? </p> 

<p> 你 聪明 的 ， 告 诉 我 ， 我 们 的 日 子 为 什么 一 去 不 复 返 呢 ?</p> 

</body> 

</html> 
































ARIS Chrome 浏览 器 中 的 显示 效果 如 图 18-32 所 示 。 


[3 columns 


€» QD 5&CSS38JavaScript 开 发 手册 /程序 代码 /18/18-30. M 安 | 三 




































































的 日 子 榴 在 时 间 的 凉 里 ， 没 有 - HAREMA- m 
dE LI E 33 AEDA FRENATE 


es 管 ish XE. d 
Ti APENE "- 
HAR? PAFAS T. 


li 的 本。 
-ENGT Kcu 

转 。 干 是 一 一 泊 让 和 5 时候， 日 MART., MAR. BIFES 

子 从 水 芝 里 过 去 ; EII BT: BEEE ORME? 

:日子 从 饭碗 里 过 去 我 何曾 留 看 僻 pem 

apu ! ng? 我 赤 间 香 来 到 这 世界 ， 
E gs ENN MV AE Ris eat 
XUmBHb(Na TE ERN. dim 

ZET GENERERA iE. x2. EANGIEE: 

nu. MEEDET. 3d BEBE). SiE. $E] 

RRPOEARI NS E 。 开 良和 太阳 再见， 这 算 嗓 苦 走 EI X BUSY 








图 18-32 设置 文章 多 栏 显示 效果 
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18.8.2 column-width 属性 








column-width JR EH FIRENZEN ER EE. ABE ARAE, LR 


他 布局 列 属性 配合 使 用 。 





语法 格式 : 

column-width: [<length> | auto] 

取 值 : 

(D) length: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 不 可 为 负 值 。 
(2) auto: 根据 浏览 器 计算 值 目 动 设置 。 


D 友情 提示 
对 于 webkit 内 核 浏览 器 ( Chrome/Safari )， 写 法 为 “-webkit-column-width”， 对 于 Gecko 


内 核 浏览 器 ( Firefox )， 写 法 为 “-moz-column-width”。 


举例 说 明 : 
以 上 一 节 的 实例 为 基础 演示 column-width 属性 在 多 栏 布局 中 的 应 用 。column-width 属性 

















既 可 以 单独 使 用 ， 又 可 以 与 其 他 布局 栏 属 性 配合 使 用 。 单 独 使 用 ， 限 制 对 象 的 单列 宽度 ;与 
其 他 布局 栏 配合 使 用 ， 可 以 设计 固定 栏 数 、 固 定 栏 宽度 的 布局 效 末 。 


多 ， 
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如 果 页 面 内 容 能 够 在 单个 栏 显 示 ， 则 会 在 单个 栏 显示 ;， 如果 窗 口 宽度 足够 ， 且 内 容 很 
则 会 在 多 个 栏目 中 显示 。 


代码 清单 18-31: 单 栏 布局 效果 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>column-width</title> 

«style type="text/css"> 

body { 
column-width: 200px; 
-webkit-column-width: 200px; /* Safari and Chrome */ 
-moz-column-width: 200px; /* Firefox */ | 


hl{ aus } 


</style> 

</head> 

<body> 

«h1229 4J—/hl- 
<h2> 朱 日 清 </h2> 
es </p> 
</body> 

</html> 


代 人 码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-33 PZR. 





[3 column-width 
€ > C 丫 )/ 稿 件 /HTML5a&CSS38Javascript 开 发 手册 /程序 代码 /18/18-31.htm| 它 三 


as 于 是 一 一 洗手 的 时 假 ， 目 子 从 水 过 里 讨 去 ! EE 
ag Ag eif. ET Muir: WE, (A EANN 


朱自清 边 过 去 ， XX IEE. 
3:8 Ead. Wan vr SIEERRERKLA TREO. 


| TIET BAGRE: 杨 覆 村 了 ， 有 丙 青 的 时 ”这 苏 只 狠 走 了 一 日 = 我 接着 而 中 息 > 但 是 新 来 的 日 子 的 彩 
| Ho He To SMAA. BR. ERR fni EATER 


| Æ 我 PEF Ata- ETRE 一 一 昨 有 人 后 了 
| IHE: Sem 


? ViEGOMET S GeBeiktTR: = ' I EASIER ti I5 POTE T BESTE GRE 
| ftv repipog? dad EI. OA : 


OMM LC INED IDEE es 
| 去 Eke E -AKATS NATAN 7 SB RIS IRE EIA RET 但 不 能 平 的 ， 2t 


| E EHE. BRUT. RUNS HH]. SZEBEX-HW? 

| “去 的 尽管 去 了 ， 来 的 尽管 来 着 ! Xx RH. VIS 你 聪明 和 的 ,上 洁 诉 我 ,我们 的 日 子 为 什么 一 去 趟 复 返 
Wim? 早上 我 起 来 的 时 候 ， 小 攻 里 射 进 两 三 方 料 料 的 ” 嘿 ? 
A. XPHiCEHMM. fepe OEHHE T: HEER 





图 18-33” 单 栏 布局 效果 


18.8.3 column-count 属性 


column-count 属性 用 于 定义 栏目 的 数目 ， 可 与 其 他 多 栏目 属性 联合 使 用 。 
语法 格式 : 

column-count: <integer> | auto 

WE: 

(D) integer: 用 整数 值 来 定义 列 数 。 不 允许 用 负 值 。 

(2) auto: 根据 column-width 日 定义 分 配 宽度 。 





L 友情 提示 
对 于 webkit 内 核 浏览 器 ( Chrome/Safari), 587; 7) *-webkit-column-count", 3} F Gecko 


HZR (Firefox) 544 *-moz-column-count" , 


举例 说 明 : 

上 一 市 中 介绍 了 column-width 在 多 栏目 布局 中 的 应 用 。 在 应 用 column-width HF, WR 
口 足够 宽 ， 且 内 容 很 多 时 ， 页 面 会 进行 多 栏目 显示 。 而 在 应 用 column-count 时 ， 无 论 窗 口 有 
多 宽 ， 页 面 都 会 按照 column-count 指定 的 栏目 数 进 行 显示 。 











代码 清单 18-32: 设置 固定 栏目 数 的 版 面 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>column-span</title> 
<style type="text/css"> 
body { 
column-count: 3; 
-webkit-column-count: 3; /* Safari 与 Chrome */ 
-moz-column-count: 3; /* Firefox */ } 
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pi 
</style> 

</head> 

<body> 
«hl24gJZJ«/h1» 
<h2> 朱 目 清 </h2> 


</body> 
</html> 

















AU E Chrome 浏览 器 中 的 显示 效果 如 图 18-34 Big. 


[C column-span 
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朱自清 
囊 子 去 了 ， 有 再 来 的 时 
LIE 杨柳 枯 了 ， 有 再 青 的 时 
48: WERT: SARMAN 


假 *。 GF ERA MAR 
我 ， 我 们 的 日 子 为 什么 一 去 不 
EE? 有 人 偷 了 他 


针 炎 上 一 油水 桨 在 大 海里 ， 我 


的 日 子 欧 在 时 间 的 流 里 ， 没 有 
声音 ， 也 没有 影子 *。 我 不 禁 头 
DESmOHHH T: 


去 的 尽管 去 了 ， 来 的 尽管 


由 有 用 了 啊 ， 轻 轻 悄悄 
地 挪移 了 ; ia crar 
转 。 于 是 一 一 洗手 的 时 候 ， 
子 从 水 盆 里 过 去 ; c 
B. B3 MEI: MR 
时 ， 便 从 凝 然 的 双眼 前 过 去 。 
ERRED. MEF 
CC TNECS IET ERO 
过 去 ， 天 里 时 ， 我 辆 在 床 


danh 
开眼 和 太阳 再 见 ， RHYEE 


了 一 日 。 我 搞 着 面 叹息 。 但 是 
新 来 的 日 子 的 影 儿 又 开始 在 叹 
息 里 内 过 了 。 


_ 在 选 去 如 飞 的 日 子 里 ， 在 
千 门 万 户 的 世界 里 的 我 能 做 些 
什么 呢 ? 只 有 得 得 轩 了， 只 有 


回去 罢 ? 但 
TET. ， 为 什么 偏 要 白白 走 


你 聪明 的 ， 吉 诉 我 ， 我 们 
的 日 子 为 什么 一 去 不 复 返 呢 ? 





18-34 设 症 固定 栏目 数 版 面 效 琳 


18.8.4 column-gap 属性 


column-gap 属性 定义 两 栏 之 间 的 距 


语法 格式 : 
column-gap: normal | «length 


BUB: 

(1) normal: 18 

(2) length: 
组 成 的 长 度 值 。 不 可 为 负 值 。 


2 友情 提示 











对 于 webkit 内 核 浏览 器 ( Chrome/Safari )， 写 法 为 
WES (Firefox), 57x79 "-moz-column-gap". 
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离 ， 可 与 其 他 多 栏目 属性 联合 使 用 。 


定 一 个 正 第 的 栏目 之 间 的 间 际 。W3C 建议 值 为 Tem. 
用 长 度 值 来 定义 栏目 与 栏目 乙 间 的 间 际 。 该 值 是 由 浮 点 数字 和 单位 标识 符 


“-webkit-column-gap”， 对 于 Gecko 


举例 说 明 : 


代码 清单 18-33: 设置 栏目 之 间 的 间距 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>column-gap</title> 
<style type="text/css"> 
body { 


column-count: 3; 


-webkit-column-count: 3; /* Safari 与 Chrome */ 


-moz-column-count: 3; /* Firefox */ 


column-gap:40px; 


-webkit-column-gap:40px; /* Safari Ej Chrome */ 


-moz-column-gap: 40px; /* Firefox */ | 


hl { coco } 


</style> 

</head> 

<body> 

«h124J AJ«/hl- 
<h2> 朱 目 请 </h2> 


</body> 
</html> 





CSS3 属性 


AU E Chrome 浏览 器 中 的 显示 效果 如 图 18-35 所 示 。 





朱自清 
RFE eliak 
! jaa T 


我 不 知道 他 们 给 了 我 
STAF: 但 我 的 手 确 平 是 
ADAPT TISISUEH 
着 ， 作 于 半日 子 已 经 从 我 手 
ep ' Jg 


在 大 海里 ， EER j 
BRE. SERES 


图 18-35 


BET ETRE SMA 
HHT» 


edi i: 来 的 尽 


d. f REED DI 
十， 我 情 在 床上 ， 
他 便 丛 售 便便 地 从 我 身上 路 
过 ， 从 我 脚 边 飞 去 了 。 等 我 
B TERROREN, REX 
HET-A. 我 接着 面 员 
8: ESSERE FREU 


设置 栏目 的 间距 


FH. 


在 进去 如 XE3EI TRE 
在 千 门 万 户 的 世界 里 的 我 能 
Wta? nA 
T: OE T: 在 儿 千 
字 日 的 向 加 里 ， HERPL. 

六 和 中 什么 国人 过 去 的 目 子 


GARE RE 
平 的 ， 为 什么 人 要 白白 走 这 


你 聪明 的 ， 告 诉 我 ， 我 
[16H30 4s RE 
Bs 
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18.8.5 column-rule JB PE 


column-rule 属性 为 复合 属性 ， 用 于 指 
语法 格式 : 

column-rule: «width > | «style» | <color> 
BUB: 

C1) width: 设置 对 象 的 栏 乙 间 的 边框 厚度 ， 
(2) style: 设置 对 象 的 栏 之 间 的 边框 样式 ， 请 参 
(3) color: 设置 对 象 的 住 之 间 的 边框 闫 色 ， 请 参 


A 友情 提示 
对 于 webkit 内 核 浏览 器 








( Chrome/Safari )， 


定 每 栏 之 间 边 框 的 宽度 、 样 式 和 颜色 。 


请 参阅 column-rule-width 属性 。 


阅 column-rule-style 属性 。 
I] column-rule-color 属性 。 


写法 为 “-webkit-column-width”， 





内 核 浏览 器 (Firefox )， 写 法 为 “-moz-column-width”。 
举例 说 明 : 
为 栏目 添加 边框 样式 ， 


AA 


代码 清单 18-34: 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>column-rule</title> 
<style type="text/css"> 
body { 

column-count: 3; 


设置 多 栏 边框 效果 


-webkit-column-count: 3; /* Safari 与 Chrome */ 
-moz-column-count: 3; /* Firefox */ 

column-gap: 40px; 

-webkit-column-gap: 40px; /* Safari 与 Chrome */ 
-moz-column-gap: 40px; /* Firefox */ 
-moz-column-rule: 4px outset #ff00ff;, /* Firefox */ 


-webkit-column-rule: 4px outset 4ff00ff; /* Safari Ej Chrome */ 


column-rule: 4px outset #ff00ff:; } 


Hl 3" leves } 
D. sos i 
Det cedes } 
</style> 
</head> 
<body> 
«h1229 4J—/hl- 
<h2> 朱 日 清 </h2> 
Sa «/p» 
</body> 
</html> 
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对 于 Gecko 


能 够 有 效 区 分 栏目 之 间 的 关系 ， 使 整个 版 耐看 起 来 结构 清晰 ， 不 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-36 所 示 。 
[3 calumn-rule x A 
» c E 5&CSS38JavaScript 开 发 手册 /程序 代码 /18/18-34. htm| 安 | 三 





















































匆匆 


朱自清 
RET. Amama 
E. mm 


了 

]R: 那 星 谁 了 giri 
amt 是 他 们 自己 延 走 了 
E: I Den? 


BE C t TTE 
HHT 


去 的 尽管 去 了 ， 来 的 尽 
ERE ARNt: VE 
Tritniy? 早上 我 起 来 的 
时 候 ， 小 基 里 射 进 两 三 方 料 


TIBTAPH S APRH: 
TERRI TG 我 也 法 
TAREHE. 于 是 一 一 : 


又 开始 在 吧 息 里 闪 过 了 。 
在 进去 如 诅 3 目 子 里 ， 


ELIT] 要 的 日 了 
Sn. NIU M T. 3n , 


GER MSR: EE 

eser RHET 我 何曾 贸 
ERAR? dos 
HERD. HREH 
oaYS ie? 但 趟 能 


平 的 ， 为 什么 偏 要 自 自 走 这 
dcr mil iil S8 TE 一 遭 呵 他 
SVAF: 但 我 的 手 确 平 是 


ADHI TSESH 
着 ， 帮 千 各 日 子 已 经 从 批 手 
mE: EHAE- kA 
在 太 海里 ， EMATEEN 
BNA SARE HE 


TERAN. SFE dh 
E a 子 汐 什 么 一 去 不 复 返 


ME Tcfa er anb 
息 。 (BE SSRESEL 8L 





图 18-36 多 栏 边 框 效 果 


18.8.6 column-rule-color 属性 


column-rule-color 属性 用 于 定义 每 栏 乙 间 边 框 的 颜色 。 
语法 格式 : 

column-rule-color: <color> 

BUB: 

color: 接受 所 有 颜色 。 


L 友情 提示 
对 于 webkit /^14Z3| 8,2» ( Chrome/Safari )， 写 法 为 
Gecko 内 核 浏 览 器 (Firefox )， 写 法 为 


“_webkit-column-rule-color”， 对 于 


* moz-column-rule-color" , 


18.8.7 column-rule-style 属性 。 
column-rule-style 属性 用 于 设置 栏 之 间 的 边框 样式 。 
语法 格式 : 


column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 


BUE: 





(1) none: 无 轮廓 。 默 认 值 。 
(2) hidden: 隐藏 边框 。 
(3) dotted: HARE JE. 


(4) dashed: 虚线 轮 序 。 
(5) solid: KAER. 


(6) double: 双 线 轮廓 。 
(7) groove: 3D [fS 26 9 
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(8) ridge: 3D 凸 槽 轮廓。 
(9) inset: 3D ENZ 46 if , 
(10) outset: 3D Hi4 46 E. 


L 友情 提示 
对 于 webkit 内 核 浏 览 对 (Chrome/Safari )， 写 法 为 ,“-webkit-column-rule-style”， 对 于 


Gecko DHR] 5,2» (Firefox), 54% "-moz-column-rule-style" . 


18.8.8 column-rule-width 属性 


column-rule-width 属性 用 于 指定 每 栏 之 间 边 框 的 宽度 。 
语法 格式 : 

column-rule-width: thin | medium | thick | length; 

BUB: 

(1) length: 用 长 度 值 来 定义 边框 的 厚度 。 不 允许 为 负 值 。 
(2) medium: 定义 默认 厚度 的 边框 。 

(3) thin: 定义 比 默 认 厚度 细 的 边框 。 

(4) thick: 定义 比 默 认 厚 度 粗 的 边框 。 











L 友情 提示 
对 于 webkit 内 核 浏 览 器 ( Chrome/Safari )， 写 法 为 “-webkit-column-rule-width”， 对 于 


Gecko 内 核 浏览 器 ( Firefox )， 写 法 为 “-moz-column-rule-width”。 
举例 说 明 : 


代码 清单 18-35: 使 用 column-rule 派生 字 属 性 设置 多 栏 边框 效果 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>column-rule</title> 

<style type="text/css"> 

body { 
column-count: 3; 
-webkit-column-count: 3; /* Safari 与 Chrome */ 
-moz-column-count: 3; /* Firefox */ 
column-gap: 40px; 
-webkit-column-gap: 40px; /* Safari Ej Chrome */ 
-moz-column-gap: 40px; /* Firefox */ 
-moz-column-rule-color: #00F; /* Firefox */ 
-webkit-column-rule-color: #00F: /* Safari Ej Chrome */ 
column-rule-color: #00F; 
-moz-column-rule-style: dashed; /* Firefox */ 
-webkit-column-rule-style: dashed; /* Safari Ej Chrome */ 
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column-rule-style: dashed; 

-moz-column-rule-width: 3px; /* Firefox */ 
-webkit-column-rule-width: 3px; /* Safari 与 Chrome */ 
column-rule-width: 3px; } 


Hl uu j 
hd onu } 
人 i 
</style> 

</head> 

<body> 
«hl124gJZJ«/h1» 
<h2> 朱 目 清 </h2> 
人 </p> 
</body> 

</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-37 所 示 。 


[3 column-rule-width 























> 马 | 口 ML5&Ccss38&Javascript 开 发 手册 /程序 代码 /18/18-35.html| = 


有 影子 * 我 不 茜 头 ; 汶 淤 而 泪 
HHT. 


29 29 


朱自清 


EJET: BERN 
$i 杨 孝 枯 了 ， 有 再 青 的 3 
fi AENT. ARHAN 
ft» (GE ERN. PAN 
K. RIDE FAH È 
TAER 有 
"uu .atmPE 
ng? 是 他 们 自己 法 走 了 
E: VITE? 


ETABA TE 


5: rE 


时 
AnaS SARR t3 


图 18-37 设置 边框 效果 


18.8.9 column-span 属性 


column-span JE ERAEN 76 282e MM 
语法 格式 : 
column-span: 
BUB 
(1) 1: 
(2) all: 





SAJI. 


1 | all 








只 在 本 栏 中 显示 。 
横 跨 所 有 栏目 并 定位 在 栏目 的 乙 轴 之 上 。 


O 友情 提示 
对 于 webkit 内 核 济 


Ww 
JU 


xX 


pe 


( Chrome/Safari )， 写 法 为 


总 开始 在 唆 息 里 闪 过 了 * 
fax Xung. 

EFi ] 万 户 的 世界 里 的 我 能 

MEHAR? 只 有 徘徊 时 
835 

RASILI HUS 

WEIR ERARA 


WS WIYREM T: 我 贸 
pereo Meg de 


PH. 5IHLIBEBBS 
ap? 


TERN: SRE X 
DIESEL ETE 





"webkit-column-span" . 
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举例 说 明 : 
在 报纸 或 杂志 中 经 常 可 以 看 到 标题 模 跨 多 个 栏 的 显示 效果 ， 














来 实现 这 种 效果 。 
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代码 清单 18-36: 横 跨 多 栏 显示 效果 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>column-rule-span</title> 

«style type="text/css"> 

body { 
column-count: 3; 
-webkit-column-count: 3; /* Safari Ej Chrome */ 
-moz-column-count: 3; /* Firefox */ 
column-gap: 40px; 
-webkit-column-gap: 40px; /* Safari 与 Chrome */ 
-moz-column-gap: 40px; /* Firefox */ 
-moz-column-rule: 2px dashed #00f; /* Firefox */ 
-webkit-column-rule: 2px dashed #00f; /* Safari Ej Chrome */ 
column-rule: 2px dashed #00f; } 

hl { 
margin: Opx; 
background: ZFCO; 
padding: 5px 8px; 
font-size: 20px; 
text-align: center; 
-webkit-column-span: all; /* Chrome */ 
column-span: all; } 

h2 ( 
text-align: center; 
font-size: 1 4px; 
-webkit-column-span: all; /* Chrome */ 
column-span: all; } 

p ítext-indent: 2em; } 

</style> 

</head> 

<body> 

«h1729 4J«/h1- 

<h2> 朱 日 消 </h2> 


</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-38 所 示 。 





MEH column-span 属性 


€ > @ |[ JHTML5&CSS38JavaScript 开 发 手册 /程序 代码 /18/18-36.html | 


TTET: AARRE 
TeüHs D. EEPEREDUE RS 桃花 
Wr. BEHRTEREHIEES 但 是 : NE 
明 的 ， 你 告诉 我 ， 我 们 的 日 于 为 
LUE ETUR 

WE: WET c: aai 
TT RéDBCME T: R 
在 又 到 了 哪里 呢 


fs 4p EE eta 


Er. ERU m HH 


28 29 


朱自清 


去 的 尽管 去 了 ， 来 的 尽管 来 
E: RAHA: TE 
üg? 早上 我 起 来 的 时 假 ， 小 屋 里 


OBT PAMONLA TRY, 
MERENI Xs go FREARK 
太阳 有 再见 ， SEURE? 一 日 * 

JR VE s 但 是 新 来 的 日 子 


在 进去 如 的 目 子 里 ， 在 千 
IREEN 
BÜHBET. 28/595 
F VFSEIBSADAEB « ERE 
rs ViptEstr ng? 过 去 的 日 
Td. MARR T PIDH 
Fo WEST! 我 留 者 些 慎 
RET 我 何曾 留 着 像 游丝 翌 
Epor? ERRENA E 
So WERBEN 
罢了 但 未 能 平 的 ,为 什么 偏 要 白 
EE — EET 


你 聪明 的 ， 告 诉 我 ， 我 们 的 
日 子 为 什么 一 去 不 复 运 呢 ? 


我 
的 影 儿 又 开始 在 忠 息 里 闪 i 过 了 * 





图 18-38 ”横路 多 栏 显 示 效 果 


18.8.10 column-fill 届 性 


column-fill 属性 用 于 定义 栏目 的 高 度 是 否 统一 。 

语法 格式 : 

column-fill: auto | balance 

取 值 : 

(1) auto: 各 栏目 的 融 度 随 看 其 内 容 的 多 少 而 目 动 变化 。 

(2) balance: 各 栏目 的 高 度 将 会 根据 内 容 最 多 的 那 一 栏 的 高 度 进 行 统一 























A 友情 提示 
对 于 webkit P1423] W,2* ( Chrome/Safari )， 


举例 说 明 : 
在 下 面 的 实例 中 ， 将 演示 column-fill 属性 的 用 法 。 目 前 ， 不 同 浏览 器 对 它 的 解析 效果 存 
在 看 很 大 的 差异 。 


代码 清单 18-37: column- 作 属性 的 使 用 
<!doctype HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>column-fill</title> 
<style> 


div.balanceCon 1 


写法 为 “webkit-column-fill”。 


column-count: 4: 
-moz-column-count: 4; 


-webkit-column-count: 4; 
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column-rule: 1px solid black; 
-moz-column-rule: 1px solid black; 
-webkit-column-rule: 1px solid black; 
column-fill: balance; 
-moz-column-fill: balance; 
-webkit-column-fill: balance; 
height: 250px; } 

div.balanceUncon { 
column-count: 4; 
-moz-column-count: 4; 
-webkit-column-count: 4; 
column-rule: 1px solid black; 
-moz-column-rule: 1px solid black; 
-webkit-column-rule: 1px solid black; 
column-fill: balance; 
-moz-column-fill: balance; 
-webkit-column-fill: balance; } 

hl 1 
margin: Opx; 
background: ZFCO; 
padding: 5px 8px; 
font-size: 20px; 
text-align: center; | 

h2 { text-align: center; font-size: 14px; } 

pí text-indent: 2em; } 

</style> 

</head> 

<body> 

«h3»column-fill: balance and constrained height</h3> 

«div class-"balanceCon" 
«h179 AJ «/h1» 
<h2> 朱 目 消 </h2> 


</div> 
<h3>column-fill: balance and unconstrained height</h3> 


«div class-"balanceUncon"» 


«h1249 4J«/h1» 
<h2> 朱 目 清 </h2> 
Spe d De. </p> 

</div> 

</body> 

</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-39 所 示 。 
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| € - Q Bn file:///D:/f&lE/HTML5&CSS3&JavaScriptTTZz FE RH/ Fere 683/18/18-37.html 
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18-39 column-fill 属性 的 使 用 


| 18.9 变换 属性 


2009 年 3 月 ，W3C 组 织 正式 发 布 3D 变换 动画 标准 章 委 。 为 了 更 容易 普及 ， 同 年 12 
H, W3C 在 3D 基础 上 又 发 布 了 2D 变换 动画 标准 草案 gue 核心 内 容 基 本 相似 ， 但 针 
对 的 主题 不 同 ， 一 个 是 3D 动画 ， 另 一 个 是 2D 动画 。 本 节 将 对 下 面 的 内 容 进行 详细 介绍 。 

B transform 











U transform-origin 
B transform-style 

B perspective 

E perspective-origin 
B backface-visibility 


18.9.1 transform 届 性 


在 CSS3 中 ， 用 Transform 功能 可 以 实现 文字 或 图 像 的 旋转 、 缩 放 、 倾 笠 和 移动 ， 这 四 
Z^) Hf H] rotate. scale. skew 和 translate 四 种 方法 来 实现 ， 
旋转 
dec e 2D 旋转 变换 和 3D 旋转 变换 ， 目 前 ，Internet Explorer 和 Opera 浏览 器 不 
文 持 3D 旋转 变换 ， 它 们 仅 文 持 2D 旋转 变换 。 旋 转变 换 包 括 以 下 五 种 方法 : 
B rotate(angle) 








B rotate3d(x ,y „z ,angle) 
B rotateX(angle) 
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E rotateY(angle) 

B. rotateZ(angle) 

HB, angle 是 指 旋转 角度 ， 如 来 设置 的 值 为 正 数 ， 表 示 顺 时 针 旋 转 ， 负 数 则 表示 逆 时 
针 旋转 。Rotate 旋转 的 默认 原点 是 对 象 的 中 心 点 。 

(1) rotate(angle) 

rotate (angle) 函数 能 够 旋转 指定 元 素 的 对 象 ， 它 主要 在 二 维 空间 中 操作 。 参 数 angle 表示 
旋转 角度 ， 该 值 为 正 数 表 示 顺 时 针 旋 转 ， 为 负数 则 表示 逆 时 针 旋转 。 例 如 ; 


div{ 

















transform:rotate(7deg); 

-ms-transform:rotate(7deg); /* IE 9 */ 
-moz-transform:rotate(7deg); /* Firefox */ 
-webkit-transform:rotate(7deg); /* Safari 5 Chrome */ 


-o-transform:rotate(7deg); /* Opera */ 


j 
举例 说 明 : 
下 面 是 一 个 简单 的 transform 属性 实现 的 实例 。 在 实例 中 定义 了 两 个 div 元 素 ， 其 中 一 个 
div 元 素 使 用 “transform:rotate (angle) ”语句 使 div 元 素 顺 时 针 旋 转 指 定 度数 。 








代码 清单 18-38: 二 维 空间 的 旋转 

<!doctype HTML 

<html> 

<head> 

<meta charset="utf-8"> 

<title>rotate(angle)</title> 

«script type="text/Javascript"> 
function click position(ob]){ 
var val-obj.value; 
var s-"myDIV" 
document.getElementBylId(s).style.transform-val; 
document.getElementBylId(s).style. WebkitTransform-val; 
document.getElementBylId(s).style.MozTransform-val; 
document.getElementBylId(s).style.OTransform-val; 
document.getElementBylId(s).style.msTransform-val; 
j 

</script> 

<style type="text/css"> 

#ordiv { 
width: 150px; 
height: 80px; 
border: 1px solid black; 
margin-top: 50px; | 

#demoDIV { 
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height: 200px; 
width: 250px; 
border: 1px solid #00F; } 
?tmyDIV { 
width: 150px; 
height: 80px; 
border: 1px solid black; 
transform: rotate( lOdeg); 
-Wwebkit-transform: rotate(10deg); 
-moz-transform: rotate(10deg); 
-ms-transform: rotate( 10deg); 
-o-transform: rotate( 10deg); 
background-color: ZF00; } 
</style> 
</head> 
<body> 
<div> 
<div style="width: 1 80px;float: left;"> 
<b>Transform:</b> 
<form> 
<div> 
<input type="radio" name="radio position" onclick-"click position(this)" 
value="rotate(10deg)" checked-'checked' /> 
<label for="value_1">rotate(10deg)</label> </div> 
<div> 
<input type="radio" name="radio position" onclick-"click position(this)" 
value="rotate(30deg)" /> 
<label for="value 2">rotate(30deg)</label></div> 
<div> 
<input type="radio" name="radio position" onclick="click position(this)" 
value-"rotate(45deg)" /> 
<label for="value 3"-rotate(45deg)«/label^ </div> 
<div> 
<input type-"radio" name="radio position" onclick="click position(this)" 
value="rotate(60deg)" /> 
<label for="value 4">rotate(60deg)</label></div> 
<div> 
<input type-"radio" name="radio position" onclick="click position(this)" 
value="rotate(90deg)" /> 
<label for="value S$">rotate(90deg)</label> </div> 
<div> 
<input type-"radio" name="radio position" onclick="click position(this)" 
value="rotate(120deg)" /> 
<label for="value 6">rotate(120deg)</label></div> 
<div> 


<input type-"radio" name="radio position" onclick="click position(this)" 


1d="value 1" 


1d="value 2" 


id="value 3" 


1d="value 4" 


1d="value 5" 


id="value 6" 


1d="value 7" 
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value-"rotate(135deg)" /> 
<label for-"value 7"-rotate(135deg)«/label^ </div> 
<div> 
<input type="radio" name="radio position" onclic 
value-"rotate( 150deg)" /> 
<label for-"value 8"-rotate(150deg)«/label»«/div» 
<div> 
<input type="radio" name="radio position" onclick="click_position(this)" id="value_9" 
value-"rotate( 180deg)" /> 
<label for-"value 9"-rotate(180deg)«/label^«/div- 
<div> 


<input type="radio" name="radio position" onclick-"click position(this)" id="value_10" 


一 1 m 


click position(this)" 1d="value 8" 


value-"none" /> 
<label for-"value 10">none</label></div> 
</form> 
</div> 
<div style="float: left;"> 
<b>ShowResult:</b> 
<div id="demoDIV" align="center"> 
<div id="ordiv"> 
<div id="myDIV">rotate(angle)</div> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 











代码 在 Chrome Ù 928 P M ERARE] 18-40 所 示 。 








Transform: ShowResul t : 
O ratate(10deg) 
& rotate(30deg) 
Ð ratate(d5deg) 
© rotate(50deg) 


© rotate(90deg) 
5 rotate(1290deg) 
© rotate(135deg) 
Ð rotate(150deg) 
O rotate(180deg) 
O none 


图 18-40 ”二 维 空 间 的 旋转 
(2) rotate3d(x,y,z,angle) 
rotate3d (x,y,z,angle) 函数 定义 一 个 3D 旋转 。 元 素 将 根据 最 后 一 个 参数 指定 的 角度 以 及 
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Hl — P Z8 IG H0 [x y, z.] HP. [8] c D A DR] E WRN ENEM, ERES b 
准 化 处 理 。 例 如 ，rotate3d (0, 1, 0, 60deg) 表示 旋转 Y 轴 60^ . 
举例 说 明 : 





代码 清单 18-39: 定义 3D 变换 旋转 
<!doctype HTML 
<html> 
<head> 
<meta charset="utf-8"> 
<title>rotate3d(x,y,z,angle)</title> 
«script type="text/Javascript"> 
function click position(ob]){ 
var val-obj.value; 
var s-"myDIV" 
document.getElementBylId(s).style.transform-val; 
document.getElementBylId(s).style. WebkitTransform-val; 
document.getElementBylId(s).style.MozTransform-val; 
document.getElementBylId(s).style.OTransform-val; 
document.getElementBylId(s).style.msTransform-val; 
j 
</script> 
<style type="text/css"> 
#ordiv { 
width: 150px; 
height: 80px; 
border: 1px solid black; 
margin-top: 50px; | 
#demoDIV { 
height: 200px; 
width: 250px; 
border: 1px solid #00F; } 
#myDIV { 
width: 150px; 
height: 80px; 
border: 1px solid black; 
transform: rotate3D(1, 1, 1, 10deg); 
-webkit-transform: rotate3D(1, 1, 1, 10deg); 
-moz-transform: rotate3D(1, 1, 1, 10deg); 
background-color: #F00; } 
</style> 
</head> 
<body> 
<div> 
<div style="width: 1 80px;float:left;"> <b>Transform:</b> 
<form> 
<div> 
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<input type="radio" name="radio position" onclick-"click position(this)" 
value="rotate3d(1,1,1,10deg)" checked='checkedď' /> 
<label for="value_1">rotate3d(1,1,1,10deg)</label></div> 
<div> 
<input type="radio" name="radio position" onclick-"click position(this)" 
value="rotate3d(1,1,1, 30deg)" /> 
<label for="value_2">rotate3d(1,1,1,30deg)</label></div> 
<div> 
<input type="radio" name="radio position" onclick-"click position(this)" 
value="rotate3d(1, 1,1,45deg)" /> 
<label for="value_3">rotate3d(1,1,1,45deg)</label></div> 
<div> 
<input type="radio" name="radio position" onclick-"click position(this)" 
value="rotate3d(1, 1,1,60deg)" /> 
<label for="value_4">rotate3d(1,1,1,60deg)</label></div> 
<div> 
<input type="radio" name="radio position" onclick-"click position(this)" 
value="rotate3d(1, 1,1,90deg )" /> 
<label for="value_5">rotate3d(1,1,1,90deg )</label> </div> 
<div> 
<input type="radio" name="radio position" onclick-"click position(this)" 
value="rotate3d(1,1,1, 120deg)" /> 
<label for-"value 6"-rotate3d(1,1,1, 120deg)</label></div> 
<div> 
<input type="radio" name="radio position" onclick-"click position(this)" 
value="rotate3d(1,1,1, 135deg)" /> 
<label for="value_7">rotate3d(1,1,1,135deg</label></div> 
<div> 
<input type="radio" name="radio position" onclick-"click position(this)" 
value="rotate3d(1,1,1, 150deg)" /> 
<label for="value_8">rotate3d(1,1,1,1 50deg)</label></div> 
<div> 
<input type="radio" name="radio position" onclick-"click position(this)" 
value="rotate3d(1, 1,1,180deg)" /> 
<label for="value_9">rotate3d(1,1,1,180deg)</label></div> 
<div> 
<input type="radio" name="radio position" onclick-"click position(this)" 
value="none" /> 
<label for="value 10">none</label></div> 
</form> 
</div> 
«div style="float:left;"> <b>ShowResult:</b> 
<div 1d="demoDIV" align="center"> 
«div id="ordiv"> 
«div 1d="myDIV">rotate(angle)</div> 
</div> 
</div> 
</div> 
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1d="value 1" 


1d="value 2" 


id="value 3" 


1d="value 4" 


1d="value 5" 


id="value 6" 


1d="value 7" 


id="value 8" 


id="value 9" 


id="value 10" 
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</div> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-41 所 示 。 


[] rotate3d(x yz angle) * 1 
E e f T STEFEN 42 hnl | 





















































Transform: ShowRezxult: 
D rotate3d (1, 1, 1, 1üdeg) 

3 rotated (l, 1, 1, 30deg) 

D) rotate34 (1, 1, 1, 45deg) 

© rotate3d(1, 1, 1, BÜdeg) 

D rotate3d(l, 1, 1, 90deg ) 

© rotate3Sd(l, 1,1, 120deg) 

O rotate3d (1, 1, 1, 135deg 

JO rotate34 (l1, 1, 1, 150deg) 

P rotateS3d (1, 1, 1, 180deg) 


O nene 





图 18-41 定义 3D 变换 旋转 


(3) rotateX(angle). rotateY (angle) rotateZ(angle) 

可 以 调用 rotateX(angle). rotateY (angle) 和 rotateZ (angle) PK Zio Puer — 4E . 
rotateX (angle) 国 数 定义 了 一 个 三 维 的 治 X 轴 的 旋转 ;rotateY (angle) 图 数 定 义 了 一 个 三 维 的 
i5 Y "HER rotateZ (angle) 国 数 定义 了 一 个 三 维 的 治 乙 轴 的 旋转 。 

K 18-2 列举 了 rotateX(angle)、rotateY (angle) 和 rotateZ (angle) 困 数 的 定义 方法 与 样 








表 18-2 rotateX(angle). rotateY (angle) 和 rotateZ (angle) 函数 列表 


rotateXDiv1 
transform: rotateX(45deg); rotateK angle 
rotateX(angle) -webkit-transform: rotateX(45deg); 


-moz-transform: rotateX(45deg); 


| 参见 本 书 配套 代码 18-407 


rotateY Div ( rotstel (angl e) 
transform: rotateY (45deg); 
RotateY (angle) -webkit-transform: rotateY (45deg); 
-moz-transform: rotateY (45deg); 
} 参见 本 书 配套 代码 18-41 





rotateZDiv{ 

transform: rotateZ(45deg); 
RotateZ(angle) -webkit-transform: rotateZ(45deg); 

-moz-transform: rotateZ(45deg); 


} 参见 本 书 配套 代码 18-42 





O 为 节省 篇 幅 ， 代 码 18-40 至 18-55 只 放 在 随 书 代码 包 中 。 
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2. 缩放 

scale()PK AREI IT IURAT EREE. CARE 2D 缩放 变换 和 3D 缩放 变换 。 缩 放 变 
换 包 括 以 下 五 种 方法 : 

E scalex,y): 定义 一 个 2D AREA, ZU X "üt Y "Bac. 

WB scale3d(x,y,z): 定义 一 个 3D 缩放 变换 ， 参 数 为 X 轴 、Y 轴 与 乙 轴 的 缩放 量 。 

E scaleX(x): 定义 一 个 沿 X 轴 方 癌 的 缩放 变换 ， 参 数 为 X 轴 方 癌 的 缩放 量 。 

E scaleY(y): 定义 一 个 沿 Y 轴 方 向 的 缩放 变换 ， 参 数 为 Y 轴 方向 的 缩放 量 。 

V scaleZ(z): 定义 一 个 沿 民 轴 方 各 的 缩放 变换 ， 参 数 为 乙 轴 方 向 的 缩放 量 。 

参数 值 可 以 是 正 数 、 负 数 和 小 数 。 当 参数 为 正 数 值 时 ， 会 将 指定 的 元 素 放 大 ; 当 参 数值 
为 负 值 时 ， 不 会 将 元 素 缩小 ， 而 是 翻转 元 素 〈 例 如 ， 文 字 被 翻转 )， 然 后 再 缩放 元 素 ; 当 值 
为 小 数 ， 即 小 于 工时 ， 可 以 缩小 元 素 。 

表 18-3 列举 了 缩放 变换 函数 的 定义 方式 与 样式 效 末 。 


















































表 18-3 缩放 变换 函数 列表 


We Pc PK 2t BEA AR 


Z'scaleDIV 1 

transform: scale(1.1, 1.1); 

-webkit-transform: scale(1.1); 
scale(x,y) -moz-transform: scale(1.1); 

-ms-transform: scale(1.1); 

-o-transform: scale(1.1); 


} 参见 本 书 配套 代码 18-43 


scale(x,y) 


Zscale3dDIV { 

transform: scale3d(0.8, -1.4, 2); 
scale3d(x,y,z) -Wwebkit-transform: scale3d(0.8, -1.4, 2); 

-moz-transform: scale3d(0.8, -1.4, 2); 


} 参见 本 书 配套 代码 18-44 


&cajeaq(1 N 1) 





#scaleXDIV { 

transform: ScaleX(-0.8) ; 

-webkit-transform: scaleX(-0.8); 
ScaleX(X) -moz-transform: scaleX(-0.8); 

-ms-transform: scaleX(-0.8); 

-o-transform: scaleX(-0.8); 

} 参见 本 书 配套 代码 18-45 

ZscaleYDIV { 

transform: ScaleY(-0.8) ; 

-webkit-transform: ScaleY(-0.8); 
scaleY(y) -moz-transform: scaleY (-0.8); 

-ms-transform: ScaleY(-0.8); 

-o-transform: scaleY(-0.8); 

} 参见 本 书 配套 代码 18-46 

ZscaleZDIV { 

transform: scaleZ(-0.8) ; 

-Webkit-transform: scaleZ(-0.8); 
scaleZ(z) -moz-transform: scaleZ(-0.8); 目前 浏览 器 不 支持 该 函数 

-ms-transform: scaleZ(-0.8); 

-o-transform: scaleZ(-0.8); 


} 参见 本 书 配套 代码 18-47 


(x) Ja [552 


2zc9ST6] (à) 





3. 移动 
translate () 图 数 允许 在 二 维 宇 间 和 三 维 空间 中 移动 元 素 。 它 包括 以 下 五 种 方法 : 
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E translate(x,y): 定义 一 个 2D 移 劫 变换， 参数 为 沿 X "85 Y 轴 的 偏 移 量 。 

E translate3d(x,y,z): 定义 一 个 3D 移 劫 变换， 参数 为 沿 X Wü. Y 轴 与 Z 轴 的 偏 移 量 。 

B translateX(x): 定义 一 个 沿 X BUT IRAE e, BAAN X RU TEE. 

V translateY(y): 定义 一 个 沿 立 轴 方 癌 的 移动 变换 ， 参 数 为 了 轴 方 向 的 偏 移 量 。 

B translateZ(z): 定义 一 个 治 乙 轴 方 同 的 移动 变换 ， 参 数 为 之 轴 方 问 的 偶 移 量 。 

参数 值 可 以 是 正 数 或 负数 。 当 参数 为 正 数 值 时 ， 会 将 指定 的 元 系 癌 右 侧 或 下 方 移动 ; L4 
参数 值 为 负 值 时 ， 则 会 将 指定 的 元 系 癌 左 侧 或 上 方 移动 。 

表 18-4 列举 了 缩放 变换 函数 的 定义 方式 与 样式 效 末 。 


























表 18-4 移动 变换 函数 列表 


旋转 函数 EON E 


#tranDIV { 

transform: translate(20px,20px); 

-webkit-transform:translate(20px,20px); 
translate(x,y) -moz-transform:translate(20px,20px); 

-ms-transform:translate(20px,20px); 

-o-transform:translate(20px,20px); 


} 参见 本 书 配套 代码 18-48 


translate(x, y) 





Zttran3dDIV { 

transform: scale3d(0.8, -1.4, 2); 
translate3d(x,y,z) -Wwebkit-transform: scale3d(0.8, -1.4, 2); 

-moz-transform: scale3d(0.8, -1.4, 2); 


} 参见 本 书 配套 代码 18-49 &cgje(r 'V s) 


#tranXDIV { 
transform: translateX(30px); 
-webkit-transform:translateX(30px); 
translate X(x) -moz-transform:translateX(30px); 目前 浏览 器 不 支持 该 函数 
-ms-transform:translateX(30px); 
-o-transform:translateX(30px); 
} 参见 本 书 配套 代码 18-50 
#tranYDIV { 
transform: translate Y (30px); 
-webkit-transform:translate Y (30px); 
translate Y (y) -moz-transform:translateY (30px); 
-ms-transform:translateY (30px); 
-o-transform:translateY (30px); 
} 参见 本 书 配套 代码 18-51 
ZttranZDIV { 
transform: translateZ(30px); 
-Wwebkit-transform:translateZ(30px); 
translate Z(z) -moz-transform:translateZ(30px); 目前 浏览 器 不 支持 该 函数 
-ms-transform:translateZ(30px); 
-o-transform:translateZ(30px); 


} 参见 本 书 配 套 代码 18-52 


translateY (y) 





4. (Us 

skew() KAE EE PERE, ENN RA OR f SETURL 

E skew(x-angle,y-angle): 在 二 维 空间 中 ， 根 据 给 定 的 角度 定义 沿 看 X 轴 和 YY 轴 方 问 倾 斜 。 

E skewX(angle): 在 二 维 空间 中 ， 根 据 给 定 的 角度 定义 沿 大 XX 轴 方 向 倾斜 。 

E skewY(angle): 在 二 维 空间 中 ， 根 据 给 定 的 角度 定义 沿 大 YY 轴 方 向 倾斜 。 

angle 参数 表示 角 硫 值 。skew0 〇 函数 可 以 令 一 个 对 象 围绕 看 X UNI Y. 轴 方 同 按照 一 定 的 
MEHR H X5 rotate0 函 数 的 旋转 不 同 。roate0 函 数 只 是 旋转 ， 不 会 改变 元 素 的 形状 。skew0 
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ER A S ETR EAR. 
表 18-5 FZE T MREP R ZI ENT GS FEXUSUR o 





表 18-5 倾斜 变换 函数 列表 


旋转 函数 


EE X AR 





ZskewDIV { 

transform: skew(15deg,15deg); 

-Wwebkit-transform: skew(15deg,15deg); 

skew(x-angle,y-angle) -moz-transform: skew(15deg,15deg); 

-ms-transform: skew(15deg,15deg); 

-o-transform: skew(15deg,15deg); 

} 参见 本 书 配套 代码 18-53 

#skewDIV { 

transform: skewX(15deg); 

-webkit-transform:skewX(15deg); 
skewX(angle) -moz-transform:skewX(15deg); 

-ms-transform:skewX(15deg); 

-o-transform:skewX(15deg); 

} 参见 本 书 配套 代码 18-54 

ZskewYDIV { 

transform: skewY(15deg); 

-Webkit-transform:skewY (15deg); 
skewY (angle) -moz-transform:skewY(15deg); 

-ms-transform:skewY(15deg); 

-o-transform:skewY(15deg); 

} 参见 本 书 配套 代码 18-55 





5. $BEESETR 

在 CSS3 中 引入 了 matrix) 函数 ， 访 函数 包括 了 所 有 的 2D 48387; 1E. matrix RAZE pR 
上 是 一 个 有 6 个 参数 的 矩阵 函数 。 它 允许 旋转 、 缩 放 、 移 动 〈 平 移 ) 和 倾斜 元 素 。 

举例 说 明 : 

ARR. 18-56 在 二 维 空间 内 定义 了 一 个 矩阵 变换 ， 通 过 不 断 改 变 窍 阵 函 数 的 参数 ， 得 
到 不 同 的 变换 效果 。 








代码 清单 18-56: 和 矩阵 变换 效果 

<!doctype HTML» 

<html> 

<head> 

<meta charset="utf-8"> 

<title>matrix(n,n,n,n,n,n)</title> 

«script type="text/Javascript"> 
function click position(obj) { 
var val-obj.value; 
var s-"myDIV" 
document.getElementBylId(s).style.transform-val; 
document.getElementBylId(s).style. WebkitTransform-val; 
document.getElementBylId(s).style.MozTransform-val; 
document.getElementBylId(s).style.OTransform-val; 
document.getElementBylId(s).style.msTransform-val; 

j 


</script> 
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«style type="text/css"> 
Zordiv 1 
width: 150px; 
height: 80px; 
border: 1px solid black; 
margin-top: 50px; 
j 
ZdemoDIV { 
height: 200px; 
width: 250px; 
border: 1px solid #00F; 
j 
?tmyDIV { 
width: 150px; 
height: 80px; 
border: 1px solid black; 
transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
-Wwebkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0)); 
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0)); 
background-color: #F00; 
j 
</style> 
</head> 
<body> 
<div> 
<div style="width:320px;float:left;"> <b>Transform:</b> 
<form> 
<div> 
<input type="radio" name="radio position" onclic 
value="matrix(0.866,0.5,-0.5,0.866,0,0)" checked-'checked' /> 
<label for="value 1">matrix(0.866,0.5,-0.5,0.866,0,0)</label> </div> 


«div» 


一 1 


click position(this)" 


<input type="radio" name-"radio position" onclick-"click position(this)" 
value-"matrix(0.866,0.5,-0.6,0.866,0,0)" > 
<label for-"value 2"^matrix(0.866,0.5,-0.6,0.866,0,0)«/Ilabel^ </div> 
<div> 
<input type="radio" name="radio position" onclic 
value-"matrix(0.866,0.8,-0.8,0.866,0,0)" > 
<label for="value 3">matrix(0.866,0.8,-0.8,0.866,0,0)</label> </div> 


«div» 


一 1 


click  position(this)" 


一 -11 —M 


<input type="radio" name-"radio position" onclick-"click position(this)" 
value-"matrix(0.786,0.8,-0.8,0.866,0,0)" /> 
<label for-"value 4"—matrix(0.786,0.8,-0.8,0.866,0,0)«/label^ </div> 


， 


id-"value 1" 


id-"value 2" 


iq" 


id-"value 3" 


id-"value 4" 
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<div> 
<input type=" 
value="matrix(0.686,0.8,-0.8,0.866,0,0)" > 
<label for="value_5">matrix(0.686,0.8,-0.8,0.866,0,0))</label></div> 
<div> 
<input type=" 
value="matrix(0.586,0.8,-0.8,0.786,0,0)" /> 
<label for="value 6">matrix(0.586,0.8,-0.8,0.786,0,0)</label></div> 
<div> 
<input type=" 
value="matrix(0.586,0.8,-0.8,0.686,0,0)" /> 
<label for="value 7">matrix(0.586,0.8,-0.8,0.686,0,0)</label> </div> 
<div> 
<input type=" 
value="none" /> 
<label for="value 8">none</label></div> 
</form> 
</div> 
<div style="float:left;"> <b>ShowResult:</b> 
<div 1d="demoDIV" align="center"> 
«div id="ordiv"> 
<div 1d="myDIV">matrix(n,n,n,n,n,n)</div> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


=n 


—M 


—M 


radio" name-"radio position" onclick-"click position(this)" 


radio" name-"radio position" onclick-"click position(this)" 


radio" name-"radio position" onclick-"click position(this)" 


radio" name-"radio position" onclick-"click position(this)" 


id-"value 5" 


id-"value 6" 


id-"value 7" 


id-"value 8" 




















AU E Chrome 浏览 器 中 的 显示 效果 如 图 18-42 PZR. 


[3 matrix(n,n,n,n,n,n) 


Transform: ShowResul t : 
matrix(0. 866, 
matrix(0. 866, 
matrix(0. 866, 


matrix(0. 696, 
matrix (0. 586, 
matrix (0. 586, 
none 


6 
6 
6 
matrix(0. 786 
6 
6 
6 


18-42 FEER XL 
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18.9.2 transform-origin 属性 


的 认 的 情况 下 ，CSS 中 的 变换 都 是 以 对 和 象 的 基点 为 中 心 。 如 果 想 要 改变 变换 的 基点 ， 可 
以 使 用 transform-origin 属性 来 完成 。 其 属性 默认 值 为 ，50% 50% 0. 

语法 格式 : 

transform-origin: [ «percentage» | «length? | left | center(D | right ] [ <percentage> | «length» 
| top | center2) | bottom ][length] 

取 值 : 

(1) percentage: 用 百分比 指定 坐标 值 。 可 以 为 负 值 。 

(2) length: 用 长 度 值 指定 坐标 值 。 可 以 为 负 值 。 

(3) left: JEDE JE ELIT] PRA b left. 

(4) centerQD: 指定 原点 的 横 坐 标 为 center。 

(5) right: 指定 原点 的 横 坐 标 为 right。 

(6) top: 指定 原点 的 纵 坐 标 为 top。 

(7) center®): 指定 原点 的 纵 坐 标 为 center. 

(8) bottom: 指定 原点 的 纵 坐 标 为 bottom. 














A 友情 提示 

对 于 webkit 内 核 浏 览 侨 ( Chrome/Safari )， 写 法 为 “-webkit- transform-origin”， 对 于 
Gecko 423) W,2& (Firefox )， 写 法 为 “-moz-transform-origin”， 对 于 Presto 内 核 浏览 器 
( Opera )， 写 法 为 “-o- transform-origin， 对 于 Trident 内 核 浏览 器 (IE)， 写 法 为 “-ms- 


transform-origin”。 
举例 说 明 : 


代码 清单 18-57: 使 用 transform-origin 属性 改变 旋转 基点 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>transform-origin</title> 
<style type="text/css"> 
Zdivl { 
width: 180px; 
height: 80px; 
border: 1px solid black; 
float: left; 
margin-top: 30px; 
j 
Zdiv2 { 
height: 80px; 
width: 180px; 
border: 1px solid black; 
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background-color: red; 
transform: rotate(45deg); 
-ms-transform: rotate(45deg); /* IE 9 */ 
-webkit-transform: rotate(45deg); /* Safari and Chrome */ 
-moz-transform: rotate(45deg); /* Firefox */ 
-o-transform: rotate(45deg); /* Opera */ 
j 
Zdiv3 ( 
width: 180px; 
height: 80px; 
border: 1px solid black; 
float: right; 
margin-top: 30px; 
j 
#div4 { 
height: 80px; 
width: 180px; 
border: 1px solid black; 
background-color: red; 
transform: rotate(45deg); 
-ms-transform: rotate(45deg); /* IE 9 */ 
-Wwebkit-transform: rotate(45deg); /* Safari and Chrome */ 
-Webkit-transform-origin: 20% 40%; /* Safari and Chrome */ 
-moz-transform: rotate(45deg); /* Firefox */ 
-o-transform: rotate(45deg); /* Opera */ 
transform-origin: 2096 4096; 
-ms-transform-origin: 20% 40%; /* IE 9 */ 
-moz-transform-origin: 20% 4096; /* Firefox */ 
-o-transform-origin: 20% 40%; /* Opera */ 
} 
</style> 
</head> 
<body> 
</br> 
<div> 
«div id="div 1"> 
<div id="div2">hello world!</div> 
</div> 
<div id="div3"> 
<div id="div4">hello world!</div> 
</div> 
</div> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-43 所 示 。 
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[3 transform-origin x WEN 
€ > C | 0 ;t 开 发 手 朋 /程序 代码 /18/18-57.html | = 








18-43 ”改变 基点 旋转 前 后 对 比 效果 


18.9.3 transform-style 属性 


transform-style 属性 指定 舱 套 元 素 是 怎样 在 三 维 宇 间 中 呈现 的 。 需 要 注意 的 是 ， 使 用 此 
属性 时 ， 必 须 完 使 用 transform 属性 。 

语法 格式 : 

transform-style: flat | preserve-3d 

WE: 

(D flat: 子 元 聚 将 不 保留 其 三 维 转换 效 末 ， 所 有 子 元 么 都 在 2D 平面 呈现 。 

(2) preserve-3d: 子 元 素 将 保留 其 三 维 转 换 效 下。 


A 友情 提示 
目前 ， 所 有 主流 浏览 器 都 不 支持 transform-style 属性 。 对 Webkit 内 核 的 浏览 器 ( Safari 
和 Chrome )， 可 为 其 添加 “webkit-” 前 级 以 获得 支持 。 


举例 说 明 : 














”代码 清单 18-58: transform-style 属性 实现 元 素 呈 现 方式 

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>transform-style</title> 
<style type="text/css"> 
Zdivl { 

position: relative; 

height: 200px; 

width: 200px; 

margin: 100px; 

padding: 10px; 

border: 1px solid black; 
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#div2 { 
padding: 50px; 
position: absolute; 
border: 1px solid black; 
background-color: red; 
transform: rotate Y (60deg); 
transform-style: preserve-3d; 
-webkit-transform: rotateY (60deg); /* Safari and Chrome */ 
-Wwebkit-transform-style: preserve-3d; /* Safari and Chrome */ 
j 
#div3 ( 
padding: 40px; 
position: absolute; 
border: 1px solid black; 
background-color: yellow; 
transform: rotateY (-60deg); 
-webkit-transform: rotateY (-60deg); /* Safari and Chrome */ 
j 
</style> 
</head> 
<body> 
<div id="div 1"> 
<div id="div2">hello world! 
<div id="div3">hello world!</div> 
</div> 
</div> 
</body> 
</html> 

















图 18-44 ”设置 子 元 素 呈 现 方式 


18.9.4 perspective 属性 
perspective 属性 用 于 设置 元 素 的 透视 视角 。 任 何 主流 浏览 器 都 不 文 持 perspective 属性 。 
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Safari 和 Chrome 使 用 私有 属性 -webkit-perspective 3c £3 c FF - 

语法 格式 : 

perspective: number | none; 

IUE: 

(1) number: ÆW B HA EDRR HITRE - 

(2) none: 默认 值 ， 相 当 于 number 值 为 0。 

perspective 仅 作 用 于 元 素 的 后 代 ， 而 不 是 元 素 本 身 。 一 般 来 说 ， 需 要 创建 一 个 容 句 ， 在 
i^ m EUB perspective. 

举例 说 明 : 





























代码 清单 18-59: 使 用 perspective 属性 设置 透视 视角 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>perspective</title> 
<style type="text/css"> 
#div1{ 
position: relative; 
height: 180px; 
width: 180px; 
margin: 50px; 
padding:10px; 
border: 1px solid black; 
perspective: 150; 
-webkit-perspective:150; /* Safari and Chrome */ 
j 
Zdiv21 
padding:50px; 
position: absolute; 
border: 1px solid black; 
background-color: red; 
transform: rotateX(45deg); 
-Wwebkit-transform: rotateX(45deg); /* Safari and Chrome */ 
j 
</style> 
</head> 
<body> 
<div id="div 1"> 
«div id="div2"> 爱 我 中 华 ! </div> 
</div> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-45 所 示 。 
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[= 






| [ perspective JA 
^ C DHBETESE/18/18-59.htm y € 


E 






18.9.5 perspective-origin ETE 





perspective-origin 属性 用 来 设置 一 个 3D 元 素 的 基数 位 置 。 访 属性 被 设 置 为 1 至 3 个 
值 ， 此 默认 值 是 "50% 50% Opx" 〈 元 素 的 中 间 )。 

语法 格式 : 

perspective-origin: [ [ «percentage» | <length> | left | center | right || «percentage» | <length> | 
top | center | bottom |? | | [ [ left | center | right | || [ top | center | bottom | | 

BUB: 

(1) percentage: 使 用 百分比 定义 X 轴 、Y 轴 的 基数 位 置 。 

(2) length: 使 用 长 度 定 义 X 轴 、Y 轴 的 基数 位 置 。 

(3) left: 相当 于 0 50%. 

(4) center: 相当 于 50% 5096. 

(5) right: 相当 于 100% 5096. 

(6) bottom: 相当 于 5096 10095. 

(7) top: 相当 于 5096 0. 

perspective-origin 属性 仅 作 用 于 元 素 的 后 代 ， 而 不 是 元 素 本 喘 。 一 般 来 说 ， 需 要 创建 一 
个 容器 ， 在 这 个 容器 上 设置 perspective-origin 属性 。 此 属性 必须 和 perspective 属性 一 起 使 
H, HEUS 3D 转换 的 元 素 。 

举例 说 明 : 























代码 清单 18-60: 设置 元 素 的 基数 位 置 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>perspective-origin</title> 
<style type="text/css"> 
#div1{ 
position: relative; 
height: 150px; 
width: 150px; 
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margin: 50px; 
padding: 10px; 
border: 1px solid black; 
perspective:150; 
perspective-origin: 10% 109^; 
-Wwebkit-perspective:150; /* Safari and Chrome */ 
-Webkit-perspective-origin: top left /* Safari and Chrome */ 
j 
Zdiv21 
padding:50px; 
position: absolute; 
border: 1px solid black; 
background-color: red; 
transform: rotateX(45deg); 
-Wwebkit-transform: rotateX(45deg); /* Safari and Chrome */ 
} 
</style> 
</head> 
<body> 
«div id="div 1"> 
«div id="div2"> 爱 我 中 华 ! </div> 
</div> 
</body> 
</html> 














代 人 码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-46 Przn 
| 


| d [5 perspective-origin 


és æ je file:///D: mA 








18-46 设置 基数 位 置 





举例 说 明 ; 
“代码 清单 18-61， 调整 基准 位 置 和 透视 角 000 


<!DOCTYPE html» 
<html> 

<head> 

<meta charset="utf-8"> 
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<title>perspective-origin</title> 
<style type="text/css"> 
Zdivl { 
position: relative; 
height: 200px; 
width: 200px; 
margin: 50px; 
padding: 10px; 
border: 1px solid black; 
j 
#div2 { 
padding: 50px; 
position: absolute; 
border: 1px solid black; 
background-color: red; 
transform: rotateX(45deg); 
-webkit-transform: rotateX(45deg); /* Safari and Chrome */ 
j 
</style> 
<script> 
function changePer(value){ 
document.getElementByld('div1').style.webkitPerspective=value; 
document.getElementBylId('persp').innerHTML-value; 
j 
function changeOrgPer() í 
var x-document.getElementById('operspx').value; 
var y-document.getElementById(' operspy").value; 
document.getElementBylId('div1*).style.webkitPerspectiveOrigin-x + '% ' + y + '%'; 
document.getElementById('opersp').innerHTML=x + "% " + y + "%"; 
j 
</script> 
</head> 
<body > 
<div id="div 1"> 
«div id="div2"> 爱 我 中 华 ! </div> 
</div> 
调整 perspective 值 :<br> 
«input type-"range" min-"1" max-"1500" value-"200" onchange="changePer(this.value)" /><br> 
perspective 值 : «span id="persp"></span>;<br><br> 


X ili: 
<input type-"range" min-"-100" max-"200" value-"50" onchange-"changeOrgPer()" id-"operspx" 
/><br> 
Y h: 
<input type="range" min="-100" max="200" value="50" onchange-"changeOrgPer()" id="operspy" 
/><br> 
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perspective-origin 值 : «span id="opersp">50% 50%</span>; 
</body> 
</html> 








代码 在 Chrome Ù 928 P M ERARE 18-47 所 示 。 


cepe 3 7 


BE? perspectivel: 
J- l 


perspectivei: 84. 





18-47 调整 基准 位 置 和 透视 角 效 果 





18.9.6 backface-visibility 属性 


backface-visibility 属性 决定 已 变换 元 又 的 反面 是 否 可 见 。 
语法 格式 : 

backface-visibility: visible | hidden; 

取 值 : 

(1) visible: 表示 反面 可 见 。 

(2) hidden: 表示 反面 不 可 见 。 

举例 说 明 : 














“代码 清单 18-62: 设置 元 素 反面 是 否 可 见 








<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 


<title>BackfaceVisibility</title> 
<style type="text/css"> 
#divl { 

width: 120px; 
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height: 80px; 
background-color: #F00; 
border: 1px solid black; 
transform: rotate Y (25deg); 
-webkit-transform: rotateY (25deg); /* Safari and Chrome */ 
-moz-transform: rotateY (25deg); /* Firefox */ 
j 
</style> 
«script type="text/Javascript"> 
function rotate(value){ 
document.getElementBylId('div1').style.webkitTransform-"rotateY (" + value + "deg)"; 
document.getElementById('div1').style.MozTransform="rotateY (" + value + "deg)"; 
document.getElementBylId('div1*).style.transform-"rotateY (" + value + "deg)"; 
document.getElementById('span1').innerHTML=value + "deg"; 
j 
function checkBackface() í 
if (document.getElementById("bf').checked--true) { 
document.getElementBylId('div1*).style.webkitBackfaceVisibility-"hidden"; 
document.getElementBylId('div1').style. MozBackfaceVisibility-" hidden"; 
:else1 
document.getElementBylId('div1*).style.webkitBackfaceVisibility-" visible"; 
document.getElementBylId('div1*).style. MozBackfaceVisibility2"visible"; } 
j 
</script> 
</head> 
<body> 
<div id="div1"> 爱 我 中 华 ! </div> 
<P> 18 ÉL A IR]: «input type="checkbox" onchange-"checkBackface()" id="bf" /></p> 
iu Y "ete :«input type-"range" min-"-360" max-"360" value-"25" onchange-"rotate(this.value)" /> 
(<span id="span1">7deg</span>); <br> 
</body> 
</html> 








代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-48 所 示 。 


ERARA M: 


PTE 3 (-152deg) ; 











K|18-48 设置 元 素 反 面 是 否 可 见 
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| 18.10 ”过滤 属性 


18.10.1 transition 属性 


transition 属性 为 复合 属性 。 用 于 设置 对 象 变 换 时 的 过 渡 ， 即 让 元 素 从 一 种 样式 逐渐 改变 
到 另 一 种 样式 ， 如 淡出 、 淡 入 、 动 画 快慢 等 。 

语法 格式 : 

transition: | transition-property | || [ transition-duration | || [ transition-timing-function | || 
| transition-delay ] 

取 值 : 

(12 transition-property: 设置 对 象 的 参与 过 渡 的 属性 。 

(2) transition-duration: 设置 对 象 过 疲 的 持续 时 间 。 

(3) transition-timing-function: 设置 对 象 中 过 渡 的 动画 类 型 。 

(4) transition-delay: 设置 对 象 延迟 过 滤 的 时 间 。 

CSS3 的 过 流 效 末 ， 证 元 素 从 一 个 样式 逐渐 改变 到 另 一 个 。 要 做 到 这 一 点 ， 必 须 指 定 两 
件 事 : 一 要 指定 要 添加 效果 的 CSS 属性 ， 二 要 指定 效果 的 持续 时 间 。 











A 友情 提示 
对 于 webkit NHR] W2 ( Chrome/Safari), 54% "-webkit-transition", *[-T Gecko 内 
核 浏览 器 (Firefox )， 写 法 为 “-moz-transition”， 对 于 Presto A43) 9,29 (Opera), 5A 


*-o-transition" , 
举例 说 明 : 


定义 一 个 div 元 素 ， 并 为 其 设置 transition 属性 和 hove 属性 。 当 鼠标 悬 停 在 div 元 素 上 时 ， 
1s 后 div 元 素 在 2s 内 宽度 自动 增加 300px。 当 鼠标 离开 div 元 素 后 ，div 元 素 恢 复 到 原状 。 











代码 清单 18-63: transition 属性 功能 的 使 用 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
div { 
width: 100px; 
height: 100px; 
background: red; 
transition: width 2s ease-in 1s; 
-moz-transition: width 2s ease-in 15; /* Firefox 4 */ 
-webkit-transition: width 2s ease-in 1s; /* Safari Ej Chrome */ 
-o-transition: width 2s ease-in 1s; /* Opera */ 
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div:hover { width: 300px; } 
</style> 
<title>transition</title> 
</head> 

<body> 

<div></div> 

</body> 

</html> 








代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-49 所 示 。 
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18.10.2  transition-property 属性 





transition-property 属性 用 于 指定 应 用 transition 的 CSS 属性 名 称 。 例 如 background-color 
属性 、width 属性 等 。 

语法 格式 : 

transition-property: none | all | property; 

BUB 

(1) none: 不 指定 过 疲 的 CSS 属性 。 

(2) al: 所 有 可 以 进行 过 渡 的 CSS 属性 。 

(3) property: 指定 要 进行 过 滤 的 CSS 属性 。 


全 友情 提示 

1. 对 于 webkit 内 核 浏 览 器 (Chrome/Safari )， 写 法 为 “-webkit-transition-property”， 对 
于 Gecko HHR) W% (Firefox )， 写 法 为 “-moz-transition-property”， 对 于 Presto NHR] Vi, 2x 
( Opera )， 写 法 为 “-o-transition-property”。 

2. 在 使 用 transition-property 属性 时 ， 必 须 指定 transition-duration 属性 ， 否 则 持续 时 间 
为 0，transition 不 会 有 任何 效果 。 


举例 说 明 : 
定义 一 个 div 元 素 ， 并 为 该 元 素 指定 过 疲 属 性 育 景 凑 色 为 监 色 。 当 鼠标 经 过 或 悬 停 在 
div LRE, div TRE SOUES H5) EH E CREE E. 
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代码 清单 18-64: transition-property 属性 功能 使 用 实例 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>transition-property</title> 

<style type="text/css"> 

div { 
width: 220px; 
height: 80px; 
background-color:#FFF; 
border: #000000 1px solid; 

j 

div:hover { 
background-color: #00F; 
transition-property: background-color; 
-moz-transition-property: background-color; 
-webkit-transition-property: background-color; 
-o-transition-property: background-color; 

j 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-50 所 示 。 
el i - 
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图 18-50 ”鼠标 经 过 或 悬 俘 在 div 元 素 前 后 效果 


18.10.3  transition-duration 届 性 

transition-duration 属性 用 来 定义 动画 过 渡 的 时 间 长 度 ， 即 从 原来 的 transition-property 属 
性 过 渡 到 新 的 transition-property 属性 所 花费 的 时 间 。 单 位 为 秒 或 野 秒 。 

语法 格式 : 


transition-duration: time; 
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BUE: 
time: 指定 对 象 过 渡 的 持续 时 间 ， 通 各 以 秒 或 坚 秒 为 单位 。 默 认 值 为 0〈 不 会 产生 效 
RO. 


A 友情 提示 
对 于 webkit 内 核 浏览 器 (Chrome/Safari )， 写 法 为 “-webkit-transition-duration”， 对 于 
IW g 


Gecko 内 核 浏览 器 (Firefox), 5744 C*-moz-transition-duration" , 4} f Presto 内 核 浏 览 器 


( Opera )， 写 法 为 “-o-transition-duration”。 

举例 说 明 : 

下 面 的 实例 中 ， 将 动画 过 渡 的 时 间 设 置 为 13$， 当 鼠标 悬 停 在 div 元 素 上 时 ， 会 看 到 青 
ARES EH EA CERE EC, un 18-51 所 示 。 























图 18-51 背景 颜色 渐变 的 过 程 


代码 清单 18-65: transition-duration 属性 功能 使 用 实例 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>transition-duration</title> 

<style type="text/css"> 

div { 
width: 220px; 
height: 80px; 
background-color: #FFF; 
border: #000000 1px solid; 

} 

div:hover { 
background-color: #00F; 
transition-property: background-color; 
-moz-transition-property: background-color; 
-Webkit-transition-property: background-color; 
-o-transition-property: background-color; 
transition-duration: 15s; 
-moz-transition-duration: 15s; 
-webkit-transition-duration: 15s; 
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-o-transition-duration: 15s; 


j 

</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


18.10.4 transition-timing-function 属性 


transition-timing-function 属性 用 来 定义 动画 过 渡 的 类 型 。 

语法 格式 : 

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n); 
取 值 : 

C1) linear: 线性 过 渡 。 和 等 同 于 贝 窟 尔 曲 线 (0.0, 0.0, 1.0, 1.0). 

(2) ease: RRI. Aw] T Ul EAR HH2 (0.25, 0.1, 0.25, 1.0). 

(3) ease-in: 由 慢 到 快 。 等 同 于 贝 塞 尔 曲线 (0.42, 0, 1.0, 1.0). 

(4) ease-out: HREJ. SEF EK (o, 0, 0.58, 1.0). 

(5) ease-in-out: HÈS. SEF N ER HEZE(0.42, 0, 0.58, 1.0). 

(6) cubic-bezier(<number>,<number>,<number>, <number>): JFE Ul3EK HH zE2S7M, 4 


个 数值 需 在 [0, 1] 区 间 内 。 


A 友情 提示 
对 于 webkit NHR) 9,25. ( Chrome/Safari )， 写 法 为 “-webkit- transition-timing-function" , 
对 于 Gecko 内 核 浏 览 器 (Firefox )， 写 法 为 “-moz-transition-timing-function”， 对 于 Presto 内 


核 浏览 器 ( Opera )， 写 法 为 “-o-transition-timing-function”。 
举例 说 明 : 


代码 清单 18-66: transition-timing-function 属性 功能 使 用 实例 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>transition-timing-function</title> 
<style type="text/css"> 
div { 
width: 100px; 
height: 80px; 
background: red; 
transition-timing-function: linear; 
-moz-transition-timing-function: linear;*/* Firefox 4 */ 


-webkit-transition-timing-function: linear;/* Safari 与 Chrome*/ 
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-o-transition-timing-function: linear;/* Opera */ 
transition: width 2s; 
-moz-transition: width 2s; 
-webkit-transition: width 2s; 
-o-transition: width 2s; 

j 

div:hover { width: 300px; } 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


18.10.5 ”transition-delay 属性 


transition-delay 属性 用 于 定义 动画 过 渡 的 延 人 运 时 间 。 

语法 格式 : 

transition-delay: time; 

取 值 : 

time: 指定 对 象 过 渡 的 延迟 时 间 。 以 秒 或 毫秒 为 单位 ， 默 认 值 为 0。 

时 间 可 以 为 正 整 数 、 负 整数 和 零 。 为 正 整 数 时 ， 过 渡 动 作 会 按照 设 定 的 时 间 延 人 运 触 
发 ， 为 负数 时 ， 过 滤 的 动作 会 从 该 时 间 扣 开始 显示 ， 之 前 的 动作 将 被 截断 ， 当 为 0 时 ， 没 
有 延迟 


A 友情 提示 
对 于 webkit 7^4 3| W Æ ( Chrome/Safari )， 写 法 为 “-webkit-transition-delay”， 对 于 





Gecko A434 2&9 (Firefox )， 写 法 为 “-moz-transition-delay”， 对 于 Presto 内 核 浏 览 恬 
(Opera), 5iX 7j ^-o-transition-delay" . 
举例 说 明 : 


在 下 面 的 实例 中 ， 当 鼠标 悬 停 在 div 元 素 上 时 ， 不 会 看 到 任何 变化 。 延 运 2s 后 ， 会 看 到 
背景 颜色 由 红色 渐变 到 赣 











代码 清单 18-67: transition-delay 属性 功能 的 使 用 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>transition-delay</title> 
<style type="text/css"> 
div { 
width: 220px; 
height: 80px; 
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background-color:red; 
border: #000000 1px solid; 

} 

div:hover { 
background-color: blue; 
transition-property: background-color; 
-moz-transition-property: background-color; 
-Wwebkit-transition-property: background-color; 
-o-transition-property: background-color; 
transition-duration: 5s; 
-moz-transition-duration: 5s; 
-webkit-transition-duration: 5s; 
-o-transition-duration: 5s; 
transition-delay:2s; 
-moz-transition-delay:2s; 
-o-transition-delay:2s; 
-Wwebkit-transition-delay:2s; 

j 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


| 18.11 动画 属性 


在 CSS3 中 ， 除 了 可 以 使 用 transition 创建 动画 效果 外 ， 还 可 以 使 用 animation 创建 更 为 
复 末 的 动画 效果 。 

在 介绍 animation 之 前 ， 首 先 介 绍 @keyframes 规则 (关键 帆 规 则 )。@keyframes 规则 是 
创建 动画 的 一 部 分 。@keyframes (关键 帧 ) 是 CSS3 动画 的 一 部 分 ， 其 后 紧 跟 一 个 标识 符 (由 
开发 者 上 自 定 义 ) ， 此 标识 符 将 在 其 他 CSS 代码 中 引用 。 在 @keyframes 和 标识 从 之 后 ， 束 是 一 
系列 的 动画 规则 Gy S CSS 代码 中 声明 的 style 规则 ) 。 这 一 系列 动画 规则 用 大 括号 括 起 
来 阳 开 ， 然 后 散在 @keyframes 之 后 的 大 括号 里 。Internet Explorer. 日 前 还 不 支持 @keyframes 
规则 或 动画 属性 。Firefox m JIBZ& *-moz-", Chrome 和 Safari 需要 加 六 缀 “-webkit-” 
Opera 需要 加 前 级 “-0-”。 

使 用 关键 帆 选 择 占 来 指定 动画 不 同 阶 段 的 属性 值 。 关 键 帧 选择 器 可 人 被 声 明 为 from. (相当 
于 0%)、to《〈 相 当 于 100%》 以 及 一 个 或 多 个 百分比 。 例 如 : 














(Vkeyframes myfirst{ 
from {background: red;} 
to (background: yellow; 
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(@-moz-keyframes myfirst {/* Firefox */ 
from (background: red; 
to (background: yellow; 
j 
(à)-webkit-keyframes myfirst {/* Safari 与 Chrome */ 
from (background: red; 
to (background: yellow; 


} 
18.11.1 animation 属性 


animation 属性 是 一 个 复合 属性 ， 用 于 定义 动画 。 该 属性 是 全 部 动画 属性 的 简写 属性 
(除了 animation-play-state 属性 )。 

语法 格式 : 

animation: [animation-name || animation-duration || animation-timing-function || animation- 
delay || animation-iteration-count || animation-direction] 

BUB: 

(1) animation-name: 用 来 定义 CSS3 动画 名 称 。 

(2) animation-duration: 用 来 定义 CSS3 动画 播放 时 间 。 

(3) animation-timing-function: 用 来 定义 CSS3 动画 播放 方式 。 

(4) animation-delay: 用 来 定义 CSS3 动画 播放 延迟 的 时 间 。 

(5) animation-iteration-count: 用 来 定义 CSS3 动画 播放 的 次 数 。 

(6) animation-direction: 用 来 定义 CSS3 动画 播放 的 方 问 。 





A 友情 提示 
对 于 webkit 内 核 浏 览 器 (Chrome/Safari )， 写 法 为 “-webkit-animation”， 对 于 Gecko 内 
核 浏览 器 ( Firefox )， 写 法 为 “-moz-animation”， 对 于 Presto 内 核 浏览 器 ( Opera )， 写 法 为 


“-0-animation” , 


举例 说 明 : 

定义 一 个 div 元 素 ， 并 通过 animation 属性 使 其 旋转 变 大 ， 再 旋转 变 小 。 在 旋转 变 大 
Hj. div 闫 色 将 会 按照 贡 色 、 红 色 、 绿 色 、 览 色 、 红 色 进 行 潮 变 。 在 旋转 变 小 时 ，div 颜色 将 
按照 红色 、 瘤 色 、 绿 色 、 红 色 进 行 渐变 。 








代码 清单 18-68: 使 用 animation 实现 动画 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>animation</title> 
<style type="text/css"> 
div { 
position: absolute; 
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background-color: yellow; 
top: 100px; 
width: 40px; 
height: 40px; 
j 
(Q)-webkit-keyframes myanimate { 
0% 1 
background-color: red; 
opacity: 1; 
-Wwebkit-transform: scale(1) rotate(0deg); } 
45% 1 
background-color: green; 
opacity: 0.75; 
-Webkit-transform: scale(1.2) rotate(90deg); ! 
70% 1 
background-color: blue; 
opacity: 0.5; 
-Webkit-transform: scale(1.5) rotate(180deg); } 
10096 1 
background-color: red; 
opacity: 1; 
-Webkit-transform: scale(2.5) rotate(360deg); ! 
j 
div:hover { 
animation: myanimate 5s linear 1s infinite alternate; 
-moz-animation: myanimate 5s linear 1s infinite alternate; /* Firefox */ 
-webkit-animation:myanimate 5s linear 1s infinite alternate; /* Safari Ej Chrome */ 
-o-animation:myanimate 5s linear ls infinite alternate; /* Opera */ 
j 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


18.11.2 animation-name JB PE 


animation-name 属性 用 来 定义 CSS3 动画 的 名 称 〈 是 个 日 定义 的 名 称 )。 
语法 格式 : 

animation-name: keyframename | none; 

取信 : 

(1) keyframename: 指定 要 绑 定 到 选择 右 的 关键 帧 名 称 。 

(2) none: 指定 没有 动 男 。 
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例如 ， 下 面 代码 中 字体 加 重 的 “mymove” 为 天 键 学 的 名 称 。 


«style type="text/css"> 

divi 
width: 100px; 
height: 100px; 
background:red; 
position:relative; 
animation-name:mymove; 


-moz-animation-name:mymove; /* Firefox */ 


-webkit-animation-name:mymove; /* Safari Ej Chrome */ 


-o-animation-name:mymove; /* Opera */ 
animation-duration:5s; 
-moz-animation-duration:5s; 
-webkit-animation-duration:5s; 
-o-animation-duration:5s; 

j 

(keyframes mymove(1 

from {left:0px;} 

to (left:200px;j 

j 

(Q)-moz-keyframes mymove{ /* Firefox */ 

from (left:0px;j 

to {left:200px;} 

j 

(Q)-webkit-keyframes mymove í /* Safari 与 Chrome */ 

from {left:Opx;} 

to (left:200px;j 

j 

(Q)-0-keyframes mymove (| /* Opera */ 

from {left:Opx;} 

to (left:200px;j 

j 

</style> 


L 友情 提示 
对 于 webkit 内 核 浏览 器 ( Chrome/Safari )， 写 法 为 “-webkit-animation-name”， 对 
Gecko HRI Z (Firefox )， 写 法 为 “-moz-animation-name”， 对 于 Presto 内 核 浏 


( Opera )， 写 法 为 “-0- animation-name”。 
p 
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18.11.3  animation-duration 属性 


animation-duration 属性 用 来 定义 CSS3 动画 播放 一 个 周期 的 持续 时 间 。 

语法 格式 : 

animation-duration: time; 

BUB: 

time: 指定 一 个 动画 完成 一 个 周期 需要 多 少 秒 或 旦 秒 。 默 认为 0， 意 味 看 没有 动画 。 当 
为 负数 时 ， 则 被 视 为 0。 

A 友情 提示 

对 于 webkit 内 核 浏览 器 ( Chrome/Safari )， 写 法 为 “-webkit-animation-duration”， 对 于 
Gecko 内 核 浏览 器 (Firefox )， 写 法 为 “-moz-animation-duration”， 对 于 Presto 内 核 浏览 器 


(Opera )， 写 法 为 “-0-animation-durationn”。 


18.11.4 animation-timing-function 属性 





animation-timing-function 属性 用 来 定义 CSS3 动画 播放 的 方式 。 默 认为 “ease”。 

语法 格式 : 

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n); 
BUB: 

(1) linear: 线性 过 波 。 等 同 于 贝 塞 尔 曲线 〈0.0, 0.0, 1.0, 1.0). 

(2) ease: 平滑 过 洲 。 等 同 于 贝 塞 尔 曲线 (0.25, 0.1, 0.25, 1.0). 

(3) ease-in: HIRR. SEET IK Hk (0.42, 0, 1.0, 1.0). 

(4) ease-out: HRSTE. SET IK Hk C0, 0, 0.58, 1.0. 

(5) ease-in-out: 由 悍 到 快 再 到 慢 。 等 同 于 贝 塞 尔 曲线 (0.42, 0, 0.58, 1.0). 

(6) cubic-bezier(<number>,<number>,<number>, <number>): 特定 的 贝 老 尔 曲线 类 型 ，4 


个 数值 需 在 [0, 1] 区 间 内 。 


A 友情 提示 
对 于 webkit 143] 95,2» ( Chrome/Safari )， 写 法 为 “-webkit-animation-timing-function”， 
对 于 Gecko A43 2$ (Firefox), 5744 "-moz-animation-timing-function", 3%} f Presto 内 


核 浏 览 器 ( Opera )， 写 法 为 “-0-animation-timing-function”。 


18.11.5 animation-delay 属性 


animation-delay 属性 定义 动画 开始 延迟 的 时 间 。 默 认 值 为 0， 人 允许 为 负 值 。 
语法 格式 : 

animation-delay: time; 

BUB: 

time: 4E X £61 Ib pb see B ASAR. SAXA 0. 
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A 友情 提示 

对 于 webkit /j4X 3| 92$ ( Chrome/Safari )， 写 法 为 “-webkit-animation-delay”， 对 于 
Gecko A^4Z3|W,2& (Firefox )， 写 法 为 “-moz-animation-delay”， 对 于 Presto 内 核 浏览 器 
( Opera )， 写 法 为 “-o- animation-delay. 


18.11.6 animation-iteration-count 届 性 


animation-iteration-count 属性 定义 CSS3 动画 播放 的 次 数 。 

语法 格式 : 

animation-iteration-count: number | infinite 

取信 : 

(1) number: 一 个 数学 ， 定 义 应 该 播放 多 少 次 动画 。 默 认为 1。 
(2) infinite: 指定 动 男 播放 无 限 次。 





A 友情 提示 
对 于 webkit 内 核 浏览 器 ( Chrome/Safari), 587; 79) "-webkit-animation-iteration-count" , 
对 于 Gecko 内 核 济 览 器 (Firefox )， 写 法 为 “-moz-animation-iteration-count”， 对 于 Presto 内 


核 浏 览 器 ( Opera )， 写 法 为 “-0-animation-iteration-count”。 


18.11.7  animation-direction 届 性 


animation-direction 属性 定义 动画 是 人 否 应 该 播放 完 后 交 蔡 逆 问 循环 。 
语法 格式 : 

animation-direction: normal | alternate 

取 值 : 

(1) normal: 默认 值 ， 表 示 动 画 的 每 次 循环 都 问 前 播放 。 

(2) alternate: 表示 区 蔡 循 环 逆 问 播放 。 














A 友情 提示 
对 于 webkit 内 核 济 览 器 (Chrome/Safari )， 写 法 为 “-webkit-animation-direction”， 对 于 
Gecko 内 核 浏览 器 (Firefox )， 写 法 为 “-moz-animation-direction”， 对 于 Presto 内 核 浏 览 器 


( Opera )， 写 法 为 “-0-animation-direction”。 


举例 说 明 : 
定义 一 个 100x100px 的 方形 div 对 象 ， 使 其 按照 200x200px 的 正方 形 轨 迹 交 蔡 循 环 逆 
问 播 放 。 


代码 清单 18-69: 交替 循环 逆 同 播放 动画 
<!doctype html> 
<html> 
<head> 
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«meta charset-"utf-8"— 
«title*animationc/ütle- 
«style type="text/css"> 
div { 
width: 100px; 
height: 100px; 
background: red; 
position: relative; 
animation-name: myfirst; 
-moz-animation-name: myfirst; /* Firefox */ 
-webkit-animation-name: myfirst; /* Safari Ej Chrome */ 
-o-animation-name: myfirst; /* Opera */ 
animation-duration: 5s; 
-moz-animation-duration: 5s; /* Firefox */ 
-webkit-animation-duration: 5s; /* Safari Ej Chrome */ 
-o-animation-duration: 5s; /* Opera */ 
animation-timing-function: linear; 
-moz-animation-timing-function: linear; /* Firefox */ 
-webkit-animation-timing-function: linear; /* Safari Ej Chrome */ 
-o-animation-timing-function: linear; /* Opera */ 
animation-iteration-count: infinite; 
-moz-animation-iteration-count: infinite; /* Firefox */ 
-webkit-animation-iteration-count: infinite; /*Safari Ej Chrome*/ 
-o-animation-iteration-count: infinite; /* Opera */ 
animation-direction: alternate; 
-moz-animation-direction: alternate; /* Firefox */ 
-webkit-animation-direction: alternate; /* Safari Ej Chrome */ 
-o-animation-direction: alternate; /* Opera */ 
/ 
j 
(keyframes myfirst { 
0% 1 
background:red; 
left:Opx; 
top:Opx; } 
25% 1 
background:yellow; 
left:200px; 
top:Opx; } 
50% 1 
background:blue; 
left:200px; 
top:200px; } 
75% { 
background:green; 
left:0px; 
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top:200px; } 

100% { 
background:red; 
left:Opx; 
top:Opx; } 

j 

(Q)-moz-keyframes myfirst { /* Firefox */ 
0% 1 

background:red; 

left:Opx; 

top:Opx; } 

25% 1 
background:yellow; 
left:200px; 
top:Opx; } 

50% 1 
background:blue; 
left:200px; 
top:200px; } 

75% { 

background: green; 
left:0px; 
top:200px; } 

100% 1 
background:red; 
left:Opx; 
top:Opx; } 

j 

(à)-webkit-keyframes myfirst ( /* Safari E; Chrome */ 
0% 1 
background:red; 
left:0px; 
top:Opx; } 

25% { 
background:yellow; 
left:200px; 
top:Opx; } 

50% 1 
background:blue; 
left:200px; 
top:200px; } 

75% { 

background: green; 
left:0px; 
top:200px; } 

100% { 
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background:red; 
left:Opx; 
top:Opx; } 
j 
(Q)-0-keyframes myfirst (/* Opera */ 
0% 1 
background:red; 
left:Opx; 
top:Opx; } 

25% 1 
background:yellow; 
left:200px; 
top:Opx; } 

50% 1 
background:blue; 
left:200px; 
top:200px; } 

75% 1 

background:green; 
left:Opx; 
top:200px; } 

10096 1 
background:red; 
left:Opx; 
top:Opx; } 

j 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


18.11.8 animation-play-state 属性 


animation-play-state 属性 定义 动画 允许 的 状态 (运行 或 暂停 )。 默 认为 运行 。 
语法 格式 : 

animation-play-state: paused|running; 

BUB: 

(1) paused: 指定 暂 何 动画 。 

(2) running: 指定 运行 动画 。 





A 友情 提示 
对 于 webkit H423] 4,25 ( Chrome/Safari), 5 ;X7j "-webkit-animation-play-state:", 4} F 


I9 


Gecko 内 核 浏览 到 (Firefox), EA 79 "-moz-animation-play-state:", 3} F Presto H423) W,2s 
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(Opera )， 写 法 为 “-o-animation-play-state:”。 


举例 说 明 : 
定义 一 个 div 对 象 ， 使 该 对 象 从 左 到 右 移 动 。 当 鼠标 大 停 在 div HRE, div 对 象 将 暂 
停 移动 ， 当 鼠标 离开 后 ，div 对 象 将 继续 沿 看 原来 的 轨迹 移动 。 





代码 清单 18-70: 设置 动画 的 状态 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>animation-play-state</title> 
<style> 
div { 
width: 100px; 
height: 100px; 
background: red; 
position: relative; 
animation: mymove 5s; 


-moz-animation: mymove 5s; /* Firefox */ 


-webkit-animation: mymove 5s; /* Safari 与 Chrome */ 


-o-animation: mymove 5s; /* Opera */ 


j 


(keyframes mymove 1 
from { left:0px; ! 
to { left: 400px; | 
j 
(Q)-moz-keyframes mymove {/* Firefox */ 
from { left:0px; } 
to 1 left: 400px; } 
j 
(à)-webkit-keyframes mymove {/* Safari Ej Chrome */ 
from { left:0px; } 
to { left: 400px; | 
j 
(Q)-o-keyframes mymove  (/* Opera */ 
from { left:0px; ! 
to { left: 400px; | 
j 
div:hover { 
animation-play-state: paused; 
-moz-animation-play-state: paused; 
-webkit-animation-play-state: paused; 
-o-animation-play-state: paused; 
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j 

</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


| 18.12 渐变 


MEE RRMA PREE AE. AA EH RERA AASE 
多 个 集 止 点 来 指定 。 每 个 集 止 点 都 有 目 己 的 颜色 。 


18.12.1 linear-gradient 


在 线性 渐变 中 ， 颜 色 平 滑 地 沿 一 条 线 过 渡 。 创 建 线性 渐变 的 方法 是 : 先 为 渐变 指定 要 遵 
人 循 的 渐变 线 ， 然 后 指定 两 个 或 更 多 磊 色 停止 点 ， 用 逗号 分 隔 。 

语法 格式 : 

-«linear-gradient^: linear-gradient([ «point»,] <color-stop>[, «color-stop» ]--); 

«point^: [left | right | [ top | bottom | || «angle» 

«color-stop^: «color» | «length» | «percentage^ | 

BUB 

«point: 表示 线性 渐变 的 方 问 。 

E left: 设置 左边 为 渐变 起 点 的 横 坐 标 值 。 

E right: 设置 右边 为 渐变 起 点 的 横 坐 标 值 。 

B top: 设置 顶部 为 渐变 起 点 的 纵 坐 标 值 。 

E bottom: 设置 底部 为 渐变 起 点 的 纵 坐 标 值 。 

B <angle>: 用 角度 值 指定 渐变 的 方向 《或 角度 )。 

<color-stop>: 指定 渐变 的 起 止 颜色 。 

E «color» 指定 颜色 。 

8 <length>: 用 长 度 值 指定 起 止 色 位 置 。 不 允许 负 值 。 

V <percentage>: 用 百分比 指定 起 止 色 位 置 。 





























A 友情 提示 
对 于 webkit 内 核 浏 览 颖 (Chrome/Safari )， 写 法 为 “-webkit-linear-gradient”， 对 于 Gecko 
内 核 浏 览 医 (Firefox )， 写 法 为 “-moz-linear-gradient”， 对 于 Presto 内 核 浏 览 器 ( Opera )， 写 


法 为 “-o- linear-gradient”。 





举例 说 明 : 
站 和 面 看 儿 个 线性 渐变 的 例子 。 青 先 定义 一 个 div 对 象 ， 为 其 添加 如 下 样式 : 
div { 
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width: 300px; 

height: 150px; 

border: #00F solid 1px; 
j 


(1) 下 面 的 代码 是 几 种 定义 简单 垂直 线性 渐变 《〈 如 图 18-52 所 示 ) 的 方法 。 


background:linear-gradient(yellow, blue); 
background:linear-gradient(to bottom, yellow, blue); 
background:linear-gradient(270deg, yellow, blue); 
background:linear-gradient(to top, blue, yellow); 
background:linear-gradient(to bottom, yellow 096, blue 100%); 


(2) 下 面 的 代码 为 线性 渐变 添加 多 种 颜色 〈 多 个 颜色 值 乙 间 使 用 逗号 隔 开 )， 并 指定 渐 
变 长 度 。 如 图 18-53 所 示 。 


background:linear-gradient(yellow, blue 20%,#0f0); 














图 18-52 ”垂直 线性 渐变 Kl18-53 ”多 颜色 线性 渐变 
(3) 下 面 的 代码 是 使 用 角度 定义 线性 渐变 ， 如 图 18-54 所 示 。 


background:linear-gradient(135deg, yellow, blue); 
background:linear-gradient(-45deg, blue, yellow); 


(40 Pme I-—^R/íÍPEIEn (£e MAXUEI Ef8JFBJCPTEZE TAHAR, 
如 图 18-55 所 示 。 





background:linear-gradient(to top right, red, white, blue) ; 


background: linear-gradientlinear-gradient(245deg, red, white, blue); 





il. 


图 18-54 ”使 用 角度 定义 线性 渐变 Kl18-55 从 右上 角 开 始 并 在 左下 角 结 束 的 线性 渐变 
下 面 以 “渐变 线 从 窍 形 的 右上 和 角 开 始 并 在 左下 角 结 束 ” 为 例 ， 给 出 一 个 完整 的 定义 线性 
渐变 的 实例 代码 。 
代码 清单 18-71: 渐变 线 从 矩形 的 右上 角 开 始 并 在 左下 角 结 束 


<!doctype html> 
<html> 
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<head> 

<meta charset="utf-8"> 

<title>linear-gradient</title> 

<style type="text/css"> 

div { 
width: 300px; 
height: 150px; 
border: #00F solid 1px; 
background: linear-gradientlinear-gradient(245deg, red, white, blue); 
background: -webkit-linear-gradient(245deg, red, white, blue); 
background: -moz-linear-gradient(245deg, red, white, blue); 
background: -o-linear-gradient(245deg, red, white, blue); 

j 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


18.12.2 radial-gradient 


£k P EXUUAE EMAR mo 8055 m GLA, AERA, A Ed 
形 或 椭圆 形 由 内 问 外 均匀 地 扩散 开 。 指 定 径 同 渐 变 的 方法 是 : 先 指 定 一 个 中 心 点 ， 然 后 是 最 
终 的 圆 形 或 椭圆 形 的 大 小 和 形状 ， 最 后 是 中 间 的 颜色 俘 止 点 ， 都 由 去 号 分 隔 。 

语法 格式 : 

radial-gradient([ «position»,]? | [ «shape» || «size» | | <shape-size>{2},]? <color-stop>|, 
«color-stop^ |); 

«position: [ «length» (D | «percentage» (D | left | center(D | right ]? [ «length» | 
«percentage» (2) | top | centerZ) | bottom ]? 

















«shape»: circle | ellipse 

«size»: closest-side | closest-corner | farthest-side | farthest-corner | contain | cover 
«shape-size»: «length» | «percentage^ 

«color-stop»: «color» | «length» | «percentage» ]? 

取信 : 

«position? 

(1) percentage: 用 百分比 指定 径 同 渐变 圆心 的 横 坐 标 值 。 可 以 为 负 值 。 
(2) lengthG: 用 长 度 值 指定 径 同 渐变 圆心 的 横 坐 标 值 。 可 以 为 负 值 。 

(3) left: 设置 左边 为 径 癌 渐变 圆心 的 横 坐 标 值 。 

(4) centerCO: 设置 中 间 为 径 问 渐变 圆心 鸭 横 坐 标 值 。 

(5) right: 设置 右边 为 径 癌 渐变 圆心 的 横 坐 标 值 。 

(6) percentageG@): 用 百分比 指定 径 同 渐变 圆心 的 纵 坐 标 值 。 可 以 为 负 值 。 
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C7) length: H KEARE n] ae ORAE. a AN TA. 

(8) top: 设置 项 部 为 径 回 渐变 圆心 的 纵 坐 标 值 。 

(9) center): 议 置 中 间 为 径 同 渐变 圆心 的 纵 坐 标 值 。 

(10) bottom: 设置 底部 为 径 回 渐变 圆心 的 纵 坐 标 值 。 

«shape»? 

(1) circle: 指定 圆 形 的 径 问 渐变。 

(2) ellipse: 指定 椭圆 形 的 径 问 渐变 。 

«size» 

(12 closest-side: J548 IR] de IE e M B cS ES DCN EE ZI 

(2) closest-corner: 指定 径 同 渐变 的 半径 为 从 圆心 到 离 圆 心 最 近 的 角 。 

(3) farthest-side: 指定 径 癌 渐变 的 半径 为 从 圆心 到 离 圆 心 最 远 的 边 。 

(4) farthest-corner: 指定 径 问 渐变 的 半径 为 从 圆心 到 离 圆 心 最 远 的 角 。 

«shape-size > 

(12 percentage: 用 百分比 指定 径 癌 渐变 的 横 癌 或 纵 癌 直径 长 度 ， 并 根据 横 问 和 纵 癌 的 
直径 来 确定 是 圆 还 是 椭圆 。 不 允许 负 值 。 

(2) length: 用 长 度 值 指定 径 同 渐变 的 横 问 或 纵 问 直径 长 度 ， 并 根据 横 癌 和 纵 问 的 直径 
来 确定 是 圆 还 是 椭圆。 不 允许 负 值 。 

<color-stop> 

(1) color: JERE. 

(2) length: 用 长 度 值 指定 起 止 色 位 置 。 不 允许 负 值 。 

(3) percentage: 用 百分比 指定 起 止 色 位 置 。 

<color-stop>: 指定 渐变 的 起 止 颜色 。 





















































A 友情 提示 

对 于 webkit NHR) 9,25 ( Chrome/Safari )， 写 法 为 “-webkit-radial-gradient”， 对 于 Gecko 
AUOD WA2 (Firefox), 54A "-moz-radial-gradient", *]-f Presto NR) W,2$ (Opera), 5 
法 为 “-o- radial-gradient" , 





举例 说 明 : 
站 和 面 看 儿 个 径 问 渐变 的 例子 。 青 先 定义 一 个 div 对 象 ， 为 其 添加 如 下 样式 : 
div { 


width: 300px; 

height: 150px; 

border: #00F solid 1px; 
j 


C12 通 销 不 同 的 径 同 渐变 语法 可 产生 相同 结果 ， 下 面 代 码 是 儿 种 定义 径 同 渐变 〈 如 图 
18-56 所 示 ) 的 方法 。 














background: radial-gradient(yellow, green); 
background: radial-gradient(ellipse , yellow 096, green 100%); 
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background: radial-gradient(5096 5096, farthest-corner , yellow, green); 


(20 以 下 示例 类 似 于 上 述 示 例 ， 不 同 的 是 指定 了 圆 形 渐变 。 





background: radial-gradient(circle, yellow, green); 
(3) 以 下 代码 指定 了 三 种 颜色 。 任 一 声明 将 产生 如 图 18-57 所 示 的 效果 。 


background: radial-gradient(red, yellow, green); 
background: radial-gradient(ellipse, red 096, yellow 50%, green 100%); 


图 18-56 (eI uma 图 18-57 指定 三 种 颜色 人 径 向 渐变 


(4) 下 面 的 代码 定义 了 一 个 从 非 渐变 框 中 心 位 置 友 出 的 径 问 渐变 。 使 用 closest-side 
farthest-side 关键 字 来 确定 渐变 的 尺寸 ， 以 使 结束 形状 分 别人 符合 渐变 框 的 最 近 或 最 远 边 。 效 
果 如 图 18-58 所 示 。 

background: radial-gradient(left bottom, farthest-side ,red, yellow 50px, green); 

(50 以 下 代码 将 距 渐变 框 堪 边 20px 和 距 渐变 框 顶 边 30px 的 位 置 设置 为 渐变 中 心 。 第 一 
行 代 码 使 用 closestrside， 以 使 渐变 的 结束 形状 由 渐变 框 的 最 接近 边 定 义 〈 即 顶 边 和 左边 )。 
效果 如 图 18-59 所 示 。 





x 

















background: radial-gradient(20px 30px,closest-side , red, yellow, green); 


background: radial-gradient(20px 30px , 20px 30px, red, yellow, green); 


0 





图 18-58 非 渐 变 框 中 心 位 置 发 出 径 向 渐变 图 18-59 ”设置 渐变 框 举例 
(6) 下面 的 代码 使 用 farthest-side， 以 使 渐变 的 结束 形状 由 渐变 框 的 最 远 边 定义 〈 即 右边 
和 确 边 )。 效 来 如 图 18-60 所 示 。 
background: radial-gradient(20px 30px,farthest-side, red, yellow, green); 


C7) 如 果 将 closest-side 或 farthest-side 用 于 圆 形 渐 弯 ， 则 依据 渐变 框 的 最 接近 边 确定 尺 
寸 。 下 面 代码 第 一 行 是 closest-side 示例 ， 访 边 为 左边 。 效 果 如 图 18-61 所 示 。 








background: radial-gradient(20px 30px, circle closest-side, red, yellow, green); 
background: radial-gradient(20px 30px, 20px 20px, red, yellow, green); 
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图 18-60 ”使 用 farthest-side 设置 径 向 渐变 图 18-61 圆 形 渐变 


上 面 介 绍 了 几 种 径 加 渐变 的 简单 使 用 方法 ， 下 面 以 实现 “ 径 问 渐变 灯 照 效 末 ”为 例 ， 给 
出 一 个 完整 的 定义 径 同 渐变 的 实例 代码 。 


代码 清单 18-72: 径 向 渐变 灯 照 效果 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>radial-gradient</title> 

«style type="text/css"> 

div { 
width: 300px; 
height: 150px; 
border: #00F solid 1px; 
background: radial-gradient(2096 10%, circle, white, #F CO 1096, black 3096); 
background: -webkit-radial-gradient(2096 10%, circle, white, ZFCO 10%, black 3096); 
background: -moz-radial-gradient(2096 1096, circle, white, #F CO 1096, black 30%); 
background: -o-radial-gradient(209 1096, circle, white, #F CO 1096, black 30%); 

j 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-62 所 示 。 


[of x 


Ir 





[3 radial-gradient x 4—1 
€ > C Q Ri 程序 代码 /18/18-72.htmll| = 


图 18-62 ” 径 癌 渐变 灯 照 效 末 
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18.12.3 repeating-linear-gradient 


repeating-linear-gradient 38 11 Tí E 29r RRMA eX PEE LE RES PL D EE OK xe ER TIE 
Wide, 

语法 格式 : 

repeating-linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+); 

«point^: [left | right ]? [ top | bottom |? || «angle»? 








«color-stop^: «color» [ «length» | «percentage» ]? 
IUE: 

«point» 

(1) left: 设置 左边 为 渐变 起 点 的 横 坐 标 值 。 

(2) right: 设置 右边 为 渐变 起 点 的 横 坐 标 值 。 

(3) top: 设置 顶部 为 渐变 起 点 的 纵 坐 标 值 。 

(4) bottom: 设置 底部 为 渐变 起 点 的 纵 举 标 值 。 
(5) angle: 用 角度 值 指定 渐变 的 方向 《或 角度 )。 
<color-stop>: 指定 渐变 的 起 止 颜色 。 

(1) color: JERE. 

(2) length: 用 长 度 值 指 定 起 止 色 位 置 。 不 允许 为 负 值 。 
(3) percentage: H Ey HEIR ERIE EME - 

















A 友情 提示 
对 于 webkit NHR) 52$ ( Chrome/Safari), E 7X 73 ^-webkit-repeating-linear-gradient" , 
对 于 Gecko ^43] 94,25 (Firefox), 5;X7j "-moz-repeating-linear-gradient", 3} F Presto 内 


核 浏览 器 (Opera) 54A "-o-repeating-linear-gradient" , 


举例 说 明 : 
以 下 实例 介绍 重复 的 线性 渐变 。 它 在 两 种 颜色 《红色 和 站 色 ) ME. 


代码 清单 18-73: 重复 性 线性 渐变 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>repeating-linear-gradient</title> 

<style type="text/css"> 

div { 
width: 300px; 
height: 150px; 
border: #00F solid 1px; 
background:repeating-linear-gradient(red, blue 20px, red 40px); 
background: -webkit-repeating-linear-gradient(red, blue 20px, red 40px); 
background: -moz-repeating-linear-gradient(red, blue 20px, red 40px); 
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background: -o-repeating-linear-gradient(red, blue 20px, red 40px); 

j 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-63 所 示 。 


Le |i]. z] 





[C] repeating-linear-gradie- * 
€ > Q [D35983/18/18-74.html 77 


2 








图 18-63 重复 性 线性 渐变 效果 


18.12.4 repeating-radial-gradient 


IH], 





repeating-radial-gradient 用 于 定义 重复 径 加 渐变。 其 语法 结构 与 radial-gradient. 基本 相 
在 到 达 上 个 颜色 停止 点 后 ， 渐 变 从 第 一 个 颜色 停止 点 处 重新 开始 并 重复 。 
语法 格式 : 


repeating-radial-gradient(|«position»,] [| [<shape>||<size>||<shape-size>{2},| <color-stop>|, 


«color-stop^ |); 


«position»: [<length>(DI<percentage>(Cblleft | center(D| right ] [«length» Q|«percentage» 2) 


top | center2) | bottom ] 
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«shape»: circle | ellipse 

«size»: closest-side | closest-corner | farthest-side | farthest-corner | contain | cover 
«shape-size»: <length> | «percentage^ 

«color-stop^: «color» [ «length» | «percentage^ | 

BUB: 

<position> 

(1) percentage: HANE EAE ORAM. A AAN AB 
(2) lengthCO: 用 长 度 值 指定 径 同 渐变 圆心 的 横 坐 标 值 。 可 以 为 负 值 。 

(3) left: 设置 左边 为 径 癌 渐变 圆心 的 横 举 标 值 。 

(4) centerd: 设置 中 间 为 径 同 渐变 圆心 的 横 坐 标 值 。 

(5) right: 设置 右边 为 径 癌 渐变 圆心 的 横 坐 标 值 。 

(6) percentageG@): 用 百分比 指定 径 同 渐变 圆心 的 纵 坐 标 值 。 可 以 为 负 值 。 
CI) length: 用 长 度 值 指定 径 同 渐变 圆心 的 纵 坐 标 值 。 可 以 为 负 信 。 
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(8) top: WE MERA fe In] re p cT] ZA EB. 

(9) center): 议 置 中 间 为 径 同 渐变 圆心 的 纵 坐 标 值 。 

(10) bottom: 设置 底部 为 径 回 渐变 圆心 的 纵 坐 标 值 。 

«shape» 

(1) circle: 指定 圆 形 的 径 问 渐变 。 

(2) ellipse: 指定 椭圆 形 的 径 问 渐变 。 

«size» 

(1) closest-side: JEEE FEKE AMEG 8 [3] C ge 5321 

(2) closest-corner: 指定 径 回 渐变 的 半径 长 度 为 从 圆心 到 离 圆 心 最 近 的 角 。 

(3) farthest-side: 指定 径 同 渐变 的 半径 长 度 为 从 圆心 到 离 圆 心 最 远 的 边 。 

(4) farthest-corner: 指定 径 同 渐变 的 羊 径 长 度 为 从 圆心 到 离 圆心 最 远 的 角 。 

«shape-size > 

(1) percentage: 用 百分比 指定 径 癌 渐变 的 权 癌 或 纵 问 直径 长 度 ， 并 根据 横 问 和 纵 癌 的 
直径 来 确定 是 圆 还 是 椭圆。 不 允许 为 负 值 。 

(2) length: 用 长 度 值 指定 径 同 渐变 的 横 问 或 纵 问 直径 长 度 ， 并 根据 横 癌 和 纵 问 的 直径 
来 确定 是 圆 还 是 椭圆 。 不 允许 为 负 值 。 

<color-stop> 

(3) color: HEERE. 

(4) length: 用 长 度 值 指定 起 止 色 位置 。 不 允许 为 负 值 。 

(5) percentage: 用 百分比 指定 起 止 色 位 置 。 

<color-stop>: 指定 渐变 的 起 止 颜色 。 





















































A 友情 提示 

对 于 webkit 内 核 浏览 到 (Chrome/Safari )， 写 法 为 “-webkit- repeating-radial-gradient” , 
对 于 Gecko 内 核 浏览 如 (Firefox )， 写 法 为 “-moz- repeating-radial-gradient”， 对 于 Presto 内 
IAR) Zs (Opera )， 写 法 为 “-o- repeating-radial-gradient”。 


举例 说 明 : 
重复 性 径 问 渐变 的 使 用 方法 与 径 问 渐变 的 使 用 方法 基本 相同 。 下 面 是 一 个 重复 性 径 问 渐 
变 的 实例 。 

















代码 清单 18-74: 重复 性 径 向 渐变 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>repeating-linear-gradient</title> 
<style type="text/css"> 
div { 
width: 300px; 
height: 150px; 
border: #00F solid 1px; 
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background: repeating-radial-gradient(20px 30px, circle closest-side, red, yellow, green 100%, yellow 
150%, red 200%); 

background: -webkit-repeating-radial-gradient(20px 30px, circle closest-side, red, yellow, green 100%, 
yellow 150%, red 200%); 

background: -moz-repeating-radial-gradient(20px 30px, circle closest-side, red, yellow, green 100%, 
yellow 150%, red 200%); 

background: -o-repeating-radial-gradient(20px 30px, circle closest-side, red, yellow, green 100%, 
yellow 150%, red 200%); 
j 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 18-64 所 示 。 


Led ml. 83 





[3 repeating-linear-gradic: = 


图 18-64 RETE n ax 


| 18.13 其 他 模块 


18.13.1 Speech 


CSS2.] S3ETEHi [f media="speech" 的 特性 ， 但 是 没有 明确 定义 可 以 应 用 的 属性 。 所 以 
听觉 媒体 类 型 没有 被 认可 。CSS3 的 Speech 模块 移 除 了 一 些 老 的 属性 ， 添 加 了 新 的 属性 ， 
它们 都 分 配 在 speech 媒体 类 型 中 。 

目前 ， 只 有 Opera 文 持 CSS3 Speech 属性 ， 不 过 需要 添加 前 组“-xv-” 实 现 。 

K 18-6 列 出 了 Speech 模块 的 属性 。 





表 18-6 Speech 模块 属性 


属 性 HB —— fü SI SH 
1 «number» | «percentage» | silent | x-soft | soft | ; 、 
voice-volume . f : medium 
medium | loud | x-loud | inherit 
«number? | left | center | right | leftwards | rightwards | ; 
volce-balance aheri center 
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none | normal | spell- out | digits | literal-punctuation | 


pause-before, pause- | <time> | none | x-weak | weak | medium | strong | x- | . 

| ! implementation dependent 
after strong | inherit 
pause | <'pause-before'> || «'pause-after'^ | | inherit implementation dependent 


rest-before, rest- | «time» | none | x-weak | weak | medium | strong | x- | . ; 

; ; implementation dependent 
after strong | inherit 
rest [| <'rest-before'> || <'rest-after'> ] | inherit implementation dependent 


cue-before, cue- | <uri> [<number> | <percentage> | silent | x-soft | soft | 
. . l none 
after medium | loud | x-loud] | none | inherit 
t defi 
cue <'cue-before'> || <'cue-after'> ] | inherit ee 
properties 


mark-before, mark- 
<string> none 
after 
t defi 
mark <'mark-before'> || <'mark-after'> | 人 
properties 


[[<specific-voice> | [<age>|] <generic-voice>] 


voice-family [<number>],]* [<specific-voice> | [<age>] <generic- | implementation dependent 
voice>] [<number>] | inherit 


; «percentage» | x-slow | slow | medium | fast | x-fast | | . 
voice-rate implementation dependent 
inherit 
Et «number? | «percentage» | x-low | low | medium | high 
voice-pitch : ; medium 
| x-high | inherit 


"v m | x-low | low | medium | high | x-high | 


下 面 是 一 个 Speech 的 人 简单 使 用 实例 。 








代码 清单 18-75: Speech 简单 使 用 实例 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>speech</title> 
<style type="text/css"> 
#speech-sample {voice-family: male; } 
#voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; } 
#voice-balance { -xv-voice-balance: left; } 
#speech-cue { cue-after: url(img/ding.wav); | 
#voice-rate { -xv-voice-rate: x-slow; } 
#voice-family { voice-family: female; } 
#voice-pitch { -xv-voice-pitch: x-low; } 
#speech-speak { speak: spell-out; } 
</style> 
</head> 


设置 暂停 时 的 效果 
设置 暂停 
设置 休止 时 的 效果 
设置 休止 
设置 提示 时 的 效果 
设置 提示 
设置 标注 时 的 效果 
设置 标注 


设置 语系 


RE 
m 
in) 
mk 


音乐 持续 时 间 


x 
m 


RE 
m 
mk 
E 
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<body> 

<div> 
«div id="speech-sample" style="border: 1px solid #666; padding:5px; font-size: 14px;" 
This is an example sentence styled with several CSS properties, including 
«span id-"voice-volume"-voice-volume,«/span^ 
«span id-"voice-balance"»voice-balance,«/span^ 
«span id="voice-rate">voice-rate, </span> 
<span id="voice-family">voice-family,</span> 
<span id="voice-pitch">voice-pitch,</span> 
<span id="speech-speak">speak</span> and 
<span id="speech-cue">cue-after.</span> 

</div> 

</div> 

</body> 

</html> 


18.13.2 Media queries 

在 CSS3 中 添加 了 Media Queries 模块 ， 访 模块 通过 不 同 的 媒体 类 型 和 条 件 定义 样式 表 规 
则 。Media Queries 让 CSS 可 以 更 精确 作用 于 不 同 的 媒体 类 型 和 同一 媒体 的 不 同 条 件 。 

语法 格式 : 


(media: «media query>< media type > and < media feature» { sRules } 








media query: [only | not | and] 
media type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed 
media feature: width | min-width | max-width 
| height | min-height | max-height 
| device-width | min-device-width | max-device-width 
| device-height | min-device-height | max-device-height 
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio 
| color | min-color | max-color 
| color-index | min-color-index | max-color-index 
| monochrome | min-monochrome | max-monochrome 
| resolution | min-resolution | max-resolution 
| scan | grid 
BUB: 
«media query»: 设置 逻辑 关键 字 ， 如 and OLEO. not EREA), only CJXIR T 
东 种 设备 ) 等 。 
«sMedia»: 指定 设备 的 名 称 。 其 设备 类 型 包括 : 
(D al: 用 于 所 有 媒体 设备 类 型 。 
(2) aural: 用 于 语音 和 音乐 合成 器 。 
(3) braille: 用 于 触觉 反馈 议 符 。 
(4) handheld: 用 于 小 型 或 手持 设备 。 
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(5) print: 用 于 打印 机 。 

(6) projection: 用 于 投影 图 像 ， 如 约 灯 万 。 

C) screen: 用 于 计算 机 显示 器 。 

(8) tty: 用 于 使 用 固定 间距 字符 格式 的 设备 。 如 电 传 打字 机 和 终端 。 

(9) tv: 用 于 电视 类 设备 。 

(10) embossed: 用 于 吓 点 字符 《〈 育 文 ) 印刷 设备 。 

<media_feature>: 定义 媒体 特性 。 访 特性 放 在 一 个 圆 括号 内 ， 如 〈min-width:250px )。 

(1) width: 定义 输出 设备 中 的 页 面 可 见 区 域 宽 度 。 

(2) height: 定义 输出 设备 中 的 页 面 可 见 区 域 高 度 。 

(3) device-width: 定义 输出 设备 的 屏 攻 可 见 宽度 。 

(4) device-height: XE X fart i d HI Berge n] Wo en SE o 

(5) orientation: 定义 “height” 是 否 大 于 或 等 于 “width”。 值 portrait 代表 是 ，landscape 
ATE e 

(6) aspect-ratio: 定义 “width” 与 “height” 的 比率 。 

(7) device-aspect-ratio: XE X, "*device-width" 5j *device-height" HJE. Audi Wim TŒ 
示 器 比率 : 4/3. 16/9. 16/10 55. 

(8) color: 定义 每 一 组 输出 设备 的 彩色 元 件 个 数 。 如 果 不 是 彩色 设备 ， 则 值 等 于 0。 

(9) colorindex: 定义 在 输出 设备 的 彩色 查询 表 中 的 条 目 数 。 如 果 没 有 使 用 彩色 人 查询 
R, MEEF 0。 

(10) monochrome: 定义 在 一 个 音色 框架 绥 剖 区 中 每 像素 包含 的 单 色 元 件 个 数 。 如 果 不 
是 音色 设备 ， 则 值 等 于 0。 

(11) resolution: 定义 设备 的 分 辨 座 。 如 96dpi、300dpi、118dpcm。 

(12) scan: 定义 电视 类 设备 的 扫描 工序 。 

(13) grid: 用 来 得 询 和 输出 设备 是 售 使 用 栅 格 或 点 孟 。 只 有 1 和 0 才 和 是 有 效 值 ，1 代表 
E, OARE. 

sRules: 样式 代 但 。 

举例 说 明 : 

媒体 查询 的 大 部 分 媒体 特性 都 接受 min 和 max 用 于 表达 “大 于 或 等 于 ”和 “小 于 或 等 
于 ” W: width 会 有 min-width 和 max-width。 

媒体 查询 可 以 用 在 CSS 中 的 @media 和 @import 规则 上 ， 也 可 以 用 在 HTML 和 
XML 中 。 


















































代码 清单 18-76: 根据 不 同 的 窗口 尺寸 显示 不 同 的 样式 效果 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>(@media</title> 
<style type="text/css"> 
div.example { background-color: #00F; } 
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/* B O EREE 1000px 以 上 时 ，div TRAEN Y C8 */ 
(Vmedia screen and (min-width: 1000px) 1 
div.div1 { background-color: #00F; } 
j 
/*'& L198 SEXE 999px 至 600px Z IR], div TRAEN ZLf&*/ 
(Vmedia screen and (min-width:600px) and (max-width:999px) 1 
div.divl { background-color: #F00; } 
j 
/* i O EEE 599px 以 下 ，div 76:8 BICI s Ee */ 
(media screen and (max-width:599px) { 
div.divl { background-color: #FF0; } 
j 
</style> 
</head> 
<body> 
<div class="divl"> 和 背景 颜色 随 着 窗口 大 小 的 变化 而 变化 1!1!! </div> 
</body> 
</html> 














A 友情 提示 


CSS3 的 @Media queries 模块 也 支持 外 部 样式 表 的 引用 。 例 妇 


<link rel="stylesheet" type="text/css" href="example.css" media 


ratio: 16/9) " /> 


21/2 


HS 


—" 


aural and (device-aspect- 
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19.1. 属性 选择 器 


在 CSS3 中 新 增加 了 3 个 属性 选择 融 ， 这 样 束 与 CSS2 中 已 经 定义 的 为 外 4 个 属性 选择 
器 共同 构成 了 一 个 比较 完整 的 选择 器 体系 。CSS 属性 选择 右 见 表 19-1. 





表 19-1 CSS 属性 选择 器 


Elatt 选择 具有 att 属性 的 元 素 








E[att-" val"] 选择 具有 att 属性 且 属 性 值 等 于 val 的 三 元 素 

F[att-—"val"] 选择 具有 att 属性 且 属 性 值 为 一 个 用 空格 分 隔 的 字 词 列表 ， 其 中 一 个 等 于 val 的 王 元 素 
F[att^-"val"] 选择 具有 att 属性 且 属 性 值 为 以 val 开头 的 字符 串 的 元 素 

F[attS-"val"] 选择 具有 att 属性 且 属 性 值 为 以 val 结尾 的 字符 串 的 卫 元 素 

F[att*-"val"] 选择 具有 att 属性 且 属 性 值 为 包含 val HERR ETZ 

E[att="val"] 选择 具有 att 属 性 且 属 性 值 为 一 个 用 连接 符 分 隔 的 字符 串 ， 并 以 val FRH E TZ 





E[att^-" val" € Z5 326 9E 4143 att 属性 且 属 性 值 为 以 val JFSE BA RAI E 7633. PER 
Adios Y EJERCER "s" BU “class” JENEM EH Uc 8E Y VR E BLUES AJ 
红包。 











代码 清单 19-1:“E[attA="val"]” 的 应 用 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Eļatt^="val"]</title> 
<style type="text/css"> 
li[class^-"s"] 1 
color: #f00; 
font-weight: bold; 
j 
</style> 
</head> 
<body> 
«ul» 


<li class="beijing"> 北 京 </li> 
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<li class="shanghai">_E}f}</li> 
<li class="hangzhou"> 杭 州 </li> 
<li class="shenzhen"> 深 圳 </li> 
<li class="sanya"> 三 业 </li> 
<li class="xian"> 西 安 </li> 
</ul> 
</body> 
</html> 











图 19-1 *E[att^-"val"]" KPR 


^ Ejatt$="val"]” 4H “ E[att*-"val"] ”的 用 法 与 “Elatt^="val"] ”基本 相同 ， 只 不 过 
“Efatt$="val"]” 匹 配 的 元 素 字 符 为 结尾 字符 与 “val” 相 同 , “Eratt*="val"]” 匹 配 的 为 任意 字 
符 与 “val” 相 同 。 将 代码 清单 19-1 中 的 “li[class^="s"] ”分别 替换 为 “li[class$="s"]” 和 
"li[class*-"s"]", ZR yk 19-2 和 19-3 所 示 。 





























图 19-2 “E[att$="val"]” 实 例 效果 图 19-3 “E[att*="val"]” 实 例 效 末 


19.2 伪 类 选择 器 


19.2.4 ”结构 性 伪 类 选择 颖 


结构 性 伪 类 选择 器 的 共同 特征 是 允许 开发 者 根据 文档 树 中 的 结构 来 指定 元 素 的 样式 。 在 
CSS3 中 增加 了 9 个 结构 性 仿 类 。 本 节 将 对 其 进行 详细 介绍 。 

1. E:root 

root 选择 器 用 来 匹配 文 档 的 根 元 素 。 也 就 是 说 ， 使 用 root 选择 器 可 以 将 样式 绑 定 到 页 面 
的 根 元 素 中 。 在 HTML 中 ， 根 元 素 永远 是 HTML。 例 如 代码 清单 19-2， 使 用 root 选择 器 为 
HTML 根 元 素 添 加 红色 背景 样式 。 
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项 
ER 


代码 清单 19-2: root 选择 器 使 用 实例 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>root</title> 
<style type="text/css"> 
html:root { background-color: #00F; } 
</style> 
</head> 
<body> 
<p> 结 构 性 伪 类 选择 右 E:root</p> 
</body> 
</html> 








在 CSS3 中 ， 由 于 root ERANDI Æ HTML 页 面 里 指 包含 
整个 HTML 部 分 ， 所 以 当 使 用 root 选择 器 和 body 元 素 指 定 背景 颜色 时 ， 根 据 不 同 的 指定 条 
件 ， 背 丸 色 的 显示 范围 会 有 所 变化 。 例 如 ， 下 面 的 代码 在 代码 清单 19-2 的 基础 上 ， 添 加 
body 元 系 背 景 颜 色 为 绿色 。 效 果 如 图 19-4 Brzn 


























<style type="text/css"> 
html:root { background-color: #00F; } 
body { background-color: #0F0; } 
</style> 


t x 
Q |M 码 /19/19-2.htmlyx| = 
EHAR EE Erant | 


ée > 





k 





图 19-4 root 选择 器 使 用 效果 


2. E:nth-child(n) 

E:nth-child(n) 用 来 下 配 父 元 素 中 的 第 n 个 子 元 素 E〈 要 使 该 属性 生效 ，E 对 象 必 须 是 某 
个 对 象 的 子 元 素 )。 例 如 ， 下 面 的 代码 将 nth-child(m) 中 的 n 设置 为 2， 来 匹配 第 2 个 列表 项 ， 
KZI RME KEN TIAE WENA. 








代码 清单 19-3: nth-child(m) 选 择 器 使 用 实例 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>E:nth-child(n)</title> 
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<style type="text/css"> 
li:nth-child(2) { 
color: #00F; 
font-weight: bold; } 
</style> 
</head> 
<body> 
«ul» 
<] 这 匹配 父 元 素 中 的 第 n 1 T7028 E</li> 
<] 这 匹配 父 元 素 中 的 第 n ATIR E</li> 
<] 这 匹配 父 元 素 中 的 第 n 个子 元 素 E</li> 
</ul> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 19-5 所 示 。 
| [ejm z | 





e 苞 配 父 元 票 中 的 第 n 个 子 元 标 E 
* 匹配 父 元 素 中 的 第 n 个 子 元 素 E 


e 匹配 你 元 素 中 的 第 rn 个子 元 于 E 


图 19-5 ”nth-child(n) 选 择 器 使 用 效果 


此 外 ， 使 用 nth-childn) 还 可 以 循环 指定 样式 ， 方 法 如 下 : 
把 nth-child(n) 的 参数 n 改 成 可 循环 的 antb 的 形式 。a 表示 每 次 循环 中 共 包 括 几 种 样式 ， 
b 表示 指定 的 样式 在 循环 中 所 在 的 位 置 。 代 人 码 如 下 : 


«style type="text/css"> 
li:nth-child(4n+1){background-color:yellow;} // 第 一 个 上 背景 色 为 贡 色 ， 这 样 依 次 循环 下 去 
li:nth-child(4n+2){background-color:bule;} // 第 二 个 二 背景 色 为 蓝 色 ..…… 
li:nth-child(4n+3){background-color:red;} // 第 三 个 二 背景 色 为 红色 ..…. 
li:nth-child(4n+4){background-color:green;} // 第 四 个 ERENER... 
/4n+4 可 缩写 为 4n 

</style> 











3. E:nth-last-child(n) 

E:nth-last-child) WHE E:nth-childm) í, RA E:nth-last-child(n) VL HEK 76 z& P 
的 倒数 第 n 个 结构 子 元 素 E (要 使 该 属性 生效 ，E 对 象 必 须 是 某 个 对 象 的 子 元 素 )。 

例如 ， 下 面 的 代码 将 nth-last-child@n) 中 的 n 设置 为 1， 来 匹配 倒数 第 1 个 列表 项 ， 将 该 
列表 项 样式 设置 为 学 体 加 曾 、 磊 色 为 监 色 。 








代码 清单 19-4: nth-child(n) 选 择 器 使 用 实例 
<!doctype html> 
<html> 
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<head> 
<meta charset="utf-8"> 
<title>E:nth-last-child(n)</title> 
«style type="text/css"> 
li:nth-last-child( 1){ 
color: #00F; 
font-weight: bold; } 
</style> 
</head> 
<body> 
«ul» 
<li> 匹 配 父 元 系 中 的 倒数 第 n 个 结构 子 元 素 E</i> 
< 这 匹配 父 元 系 中 的 倒数 第 n 个 结构 子 元 素 E</li> 
< 匹配 父 元 系 中 的 倒数 第 n 个 结构 子 元 素 E</li> 
</ul> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 19-6 所 示 。 


[5 Emth-last-child(n) x 4 —1 


。 匹配 父 元 素 中 的 倒数 第 n 个 结构 子 元 素 E 
。 区 配 父 元 素 中 的 倒数 第 n 个 结构 子 元 素 E 
。 匹 配 父 元 素 中 的 倒数 第 n 个 结构 子 元 素 E 





图 19-6 ”nth-last-child(n) 选 择 器 使 用 效果 


4. E:nth-of-type(n) 

E:nth-of-type(n) 用 来 匹配 同类 型 中 的 第 n 个 同 级 兄 第 元 素 卫 。 例 如 ， 下 面 的 代码 将 nth- 
of-type(n) 中 的 n 设置 为 2， 来 匹配 同 闫 型 p 7628 J58 2 个 子 元 么 ， 将 该 子 元 素 样式 设置 为 字 
VUE. BRA WC. 








代码 清单 19-5: nth-of-type(m) 选 择 器 使 用 实例 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>E:nth-of-type(n)</title> 
<style type="text/css"> 
p:nth-of-type(2) 1 
color: #00F; 
font-weight: bold; } 
</style> 
</head> 
<body> 
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<div> 
<p> 匹 配 同 闫 型 中 的 第 n MARIBIC E</p> 
<div> 匹 配 同类 型 中 的 第 m AI [a] 2 7625 7638 E</div> 
<p> 匹 配 同 闫 型 中 的 第 n A [8]ZR 925 7638 E</p> 
<p> 匹 配 同 类 型 中 的 第 n 个 同 级 兄弟 元 素 E</p> 
<p> 匹 配 同 类 型 中 的 第 n 个 同 级 兄弟 元 素 E</p> 

</div> 

</body> 

</html> 




















代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 19-7 所 示 。 


emm cm] 





[5 Emth-of-type(r) x u 
€ > C *BVERRTE/19/9-S.himl| 三 
匹配 同类 型 中 的 第 n 个 同 级 兄弟 元 素 E 
匹配 同类 型 中 的 第 n 个 同 级 兄弟 元 素 E 


匹配 同类 型 中 的 第 n 个 同 级 兄弟 元 素 E 
匹配 同类 型 中 的 第 no 个 同 级 兄弟 元 素 E 
匹配 网 兴 型 中 的 情 n 个 同 稻 兄弟 元 素 E 


图 19-7 nth-of-type(n) 选 择 器 使 用 效果 


nth-oftyp(nD) 选 择 亏 还 可 以 指定 同 级 元 素 中 所 有 奇数 或 偶数 子 元 聚 的 样式 。 当 mn 为 odd 或 
2n-l 时 ， 指 定 同 级 元 聚 中 所 有 奇数 子 元 素 的 样式 。 效 果 如 图 19-8 HR. 

















«style type="text/css"> 
p:nth-of-type(odd) 1 
color: #00F; 
font-weight: bold; } 
</style> 


= n 为 even 或 2n 时 ， 指 定 同 级 元 素 中 所 有 侦 数 子 元 又 的 样式 。 效 来 如 图 19-9 所 示 。 








«style type="text/css"> 
p:nth-of-type(even) { 
color: #00F; 
font-weight: bold; } 

</style> 


[5 Emth-of-typein} x WD 
€ 9 (5mm onmi E € 9 € [D meg 6htmli; 三 


KAPATA n t EERE MA epis FS PRERE 


匹配 同 闪 型 中 的 第 = 个 同 级 兄弟 元 素 E 匹配 同类 型 中 的 和 苇 r 个 同 级 兄弟 元 素 E 
匹配 同 凑 型 中 的 第 rm 个 同 级 兄弟 元 素 E 匹配 同类 型 中 的 第 = 个 同 级 兄弟 元 素 E 
匹配 同类 中 的 第 mn 个 同 级 兄弟 元 素 E 匹配 同 兴 型 中 的 第 nm 个 同 级 兄弟 元 素 E 
匹配 同 溢 型 中 的 第 rm 个 同 级 兄弟 元 素 B 匹配 同类 型 中 的 第 n 个 同 级 兄弟 元 素 E 





图 19-8 ”nth-of-type(odd) 效 果 图 19-9 ”nth-of-type(even) 效 果 
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o. E:nth-last-of-type(n) 

E:nth-last-of-type(o) 用 来 匹配 同类 型 中 的 倒数 第 n I 8) 2 9628 7638 E. E nth-of-typ(n) 
选择 器 相同 ，nth-last-of-type(n) 选 择 嚣 同样 可 以 指定 同 级 元 素 中 所 有 奇数 或 俩 数 子 元 素 的 
FFIN o 

例如 ， 下 和 面 的 代码 将 nth-last-of-type HJ n 设置 为 2， 来 匹配 同类 型 p 元 素 的 倒数 第 2 
个 子 元 素 ， 将 该 子 元 素 样式 设置 为 字体 加 重 、 颜 色 为 瘤 色 。 














代码 清单 19-6: nth-last-of-type(n) 选 择 器 使 用 实例 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>E: nth-last-of-type(n)</title> 

«style type="text/css"> 

p:nth-last-of-type(2) 1 
color: #00F; 
font-weight: bold; } 

</style> 

</head> 

<body> 

<div> 
<p> 匹 配 同 类 型 中 的 倒数 第 n 个 同 级 兄弟 元 素 E</p> 
<div> 匹 配 同类 型 中 的 倒数 第 na 个 同 级 兄弟 元 素 E</div> 
<p> 匹 配 同 类 型 中 的 倒数 第 n 个 同 级 兄弟 元 素 E</p> 
<p> 匹 配 同 类 型 中 的 倒数 第 n 个 同 级 兄弟 元 素 E</p> 
<p> 匹 配 同类 型 中 的 倒数 第 na 个 同 级 兄弟 元 素 E</p> 

</div> 

</body> 

</html> 


代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 19-10 所 示 。 




















[5 E: nih-last-of-typefn}) X 
€ > Q|[BItEJ19/19-6.html 7| 三 


匹配 同类 开 中 的 倒数 第 n 个 同 级 兄弟 元 素 E 
匹配 同类 型 中 的 倒数 第 mn 个 同 级 见 弟 元 素 E 
匹配 同类 型 中 的 倒数 第 nm 个 同 级 兄弟 元 素 E 
匹配 同 类 型 中 的 倒数 笔 m 个 同 级 兄弟 元 素 E 
匹配 同类 型 中 的 倒数 第 r 个 同月 兄弟 元 素 E 








图 19-10 nth-last-of-type(n) Zi ^. 


6. Edast-child 
E:last-child 用 来 匹配 父 元 素 中 最 后 一 个 E 元 素 〈 要 使 该 属性 生效 ，E 对 象 必须 是 某 个 对 
FINT 7638 5. 
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例如 ， 下 面 的 代码 使 用 last-child 将 p 元 素 的 倒数 第 


色 为 蓝 色 。 
代码 清单 19-7: last-child 选择 昌 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>E:last-child)</title> 

<style type="text/css"> 

p:last-child { 

color: #00F; 
font-weight: bold; } 

</style> 

</head> 

<body> 

<div> 
<p> UL OA? JUR H Ja 
<div> LEK ITR rP dc 
<p> 匹 配 父 元 素 中 最 后 
<p> ILEK ICR H ija 
<p> UL OA? JUR Pd 

</div> 

</body> 

</html> 
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器 使 用 实例 


^ E JU /p» 
^ E 762&«/div» 
ANEA 
^ E 763&«/p» 
^ E 7638«/p» 





1 AIUTO KENTA DR 


ARII Chrome 浏览 器 中 的 显示 效果 如 图 19711 所 示 。 


7. E:first-of-type 


E:first-of-type 用 来 匹配 同类 
] 4-708. 





of-type 匹配 同类 型 p 7628 IT] 98 


代码 清单 19-8: first-of-type 选择 虽 


<!doctype html> 
<html> 
<head> 
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[5 Edasi-child 


€ > Q |O 73/19/19 7.html 77 e E 


Du scs TELE 


[LE rc iie — ELS 
LAS? — PEERS 
[LE S? Ri — T ETC 
DLE SP LER EL PEJUS 


图 19-11 





last-child 效果 








型 中 的 第 


器 使 用 实例 


^R s: 了 E。 例 如 ， 下 面 的 代码 使 用 first- 


将 该 子 元 又 样式 设置 为 字体 加 重 、 赢 色 为 监 色 。 
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«meta charset-"utf-8" 

«title? E:first-of-type-/title^ 

«style type="text/css"> 

p:first-of-type( 
color: #00F; 
font-weight: bold; } 

</style> 

</head> 

<body> 

<div> 
<P> M HKE eB EAERI E</p> 
<div> PLA HKA H AKIR E</div> 
«p» JU RE HKE eB EAKR E</p> 
«p» JURO HIS UE H T 28 — [812 00 0 7628. E</p> 
<p> 匹 配 同 闫 型 中 的 第 一 个 同 级 兄 种 元 素 E</p> 

</div> 

</body> 

</html> 


代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 19-12 所 示 。 




















匹配 同类 型 中 的 第 一 个 同 级 兄弟 元 素 E 


匹配 同 兴 型 中 的 第 一 个 同 级 兄弟 元 素 E 
匹配 同类 型 中 的 第 一 个 同 级 兄弟 元 素 E 
匹配 同 举 型 中 的 第 一 个 同 级 兄弟 元素 E 
匹配 同类 型 中 的 第 一 个 同 级 兄弟 元 素 E 





图 19-12 first-of-type 效果 


8. E:only-child 

E:only-child [L2 7628 DUH I] —4 T7638 E〈 要 使 该 属性 生效 ，E 对 象 必 须 是 某 个 对 象 
的 子 元 素 )。 

例如 ， 下 面 的 代码 由 于 第 一 个 div 元 素 仅 有 一 个 p 子 元 素 ， 所 以 使 用 only-child 进行 匹 
配 ， 将 该 子 元素 样 陈设 置 为 字体 加 重 、 颜 色 为 监 色 。 














代码 清单 19-9: only-child 选择 器 使 用 实例 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>E:only-child</title> 
<style type="text/css"> 
p:only-child { 
color: #00F; 
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font-weight: bold; } 
</style> 
</head> 
<body> 
<div> 
<div><p> 匹 配属 于 父 元 素 中 唯一 子 元 素 的 E</p></div> 
<div> 
<p> UL Tio T- 92 76 38 P E — T 7638 HJ E</p> 
«p» UL Tio Jm T- 92 76 38 P E — 3 7638 HJ E</p> 
</div> 
</div> 
</body> 
</html> 


代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 19-13 所 示 。 


e 

















(5 E:xonly-child 
€ 3 Q|*/919-9html?:| = 


MARHAM TRE 


MAHLA DS LRE 
AJE J ripe 了 元 过 的 E 


图 19-13  only-child 效果 


9. E:only-of-type 
E:only-of-type 还 配 同 类 型 中 唯一 的 一 个 同 级 兄 和 贰 元 素 E。 例 如 ， 下 面 的 代码 使 用 only-of- 
type 匹配 属于 同类 型 中 唯一 同 级 元 素 的 p WR, KZRA KAN TAIE, MEN AE. 














代码 清单 19-10: only-of-type 选择 器 使 用 实例 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>E:only-of-type</title> 
<style type="text/css"> 
p:only-of-type { 
color: #00F; 
font-weight: bold; } 
</style> 
</head> 
<body> 
<div> <p> 匹 配属 于 同类 型 中 唯一 兄弟 元 素 的 E</p></div> 
<div> 
<p> 匹 配属 于 同类 型 中 唯一 兄弟 元 素 的 E</p> 
<p> 匹 配属 于 同类 型 中 唯一 兄弟 元 素 的 E</p> 


</div> 
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</body> 
</html> 


代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 19-14 所 示 。 





DL] Eonly of ype x V3 
€ > Q 1:919 10html y 三 


I 
KASTE  50b57GRÉIE 
UU IT [oS RE ring — 55357085 8E 
TARF hE- RATEI 





图 19-14  only-of-type 效果 
10. E:empty 
E:empty 用 来 匹配 没有 任何 子 元 素 〈 包 括 tet TA) 的 元 素 E. Pun, FERRIE 
"fJ p ZUR HIE AREA 











代码 清单 19-11: empty 选择 器 使 用 实例 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>E:empty</title> 
<style type="text/css"> 
p:empty 1 
width:300px; 
height:25px; 
background: ?ff0000; } 
</style> 
</head> 
<body> 
<div> 
<p></p> 
<p>[ 匹 配 没有 任何 子 元 素 〈 包 括 text 节点 ) 的 元 素 E</p> 
<p> 匹 配 没 有 任何 子 元 素 〈 包 括 text WA) ILR E</p> 
</div> 
</body> 
</html> 


代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 19-15 所 示 。 

















x Vel 
€ > Q [59m8tggy/19/9-11.html 7| = 


| SHIRE 《包括 text 节 点 的 元 素 E 
匹配 没有 任何 子 元 素 (包括 text 节 点 》 的 元 素 E 





图 19-15 empty 效果 
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19.2.2 ”UI 元素 状态 伪 类 选择 如 


CSS3 中 除了 上 节 介 绍 的 结构 性 伪 类 选择 占 外 ， 还 有 一 种 名 为 UI 元 素 的 状态 伪 类 选择 
器 。 该 选择 器 指定 的 样式 只 有 当 元 素 处 于 某 种 状态 时 才 起 作用 ， 在 默认 状态 下 不 起 作用 。 

UI 元 素 的 状态 一 般 包 括 : 可 用 、 不 可 用 、 和 选中、 未 选中 、 获 取 焦 点 、 失 去 焦点 、 人 锁定 、 符 
机 等 。CSS 3 定义 了 :checked、:enabled、:disabled 和 :selection 四 种 常用 的 状态 伪 类 选择 器 。 

1. E:Checked 

E:checked 匹配 所 有 用 户 界面 (form. 表单 ) 中 处 于 选中 状态 的 元 素 耻 《〈 仅 适用 于 单 选 按 
钮 或 复 选 框 )。 例 如 ， 下 面 的 代码 使 用 checked 选择 器 匹配 每 个 选中 的 输入 元 素 。 



































代码 清单 19-12: checked 选择 器 使 用 实例 

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>E:checked</title> 
«style type="text/css"> 

input:checked-span { background: #f00; } 
</style> 
</head> 
<body> 
<form metho 


LM 


post" action="#"> 

«input type="radio" name-"city group" value-"0" /> 
<span> 北 京 </span><br> 

«input type="radio" name="city group" value-"1" /> 
«span» 上海 </span><br> 
«input type="checkbox" name 
<span> 北 京 </span><br> 
«input type="checkbox" name 
<span> 上 海 </span><br> 
«input type="checkbox" name 
«span»] JM«/span- 


</form> 


zi 


city group2" value-"0" /> 


LM 


city group2" value-"1" /> 


LM 


city group2" value-"2" /> 


</body> 
</html> 











图 19-16 checked 选择 器 使 用 效果 
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2. E:enabled 5 E:disabled 

E:enabled 用 于 匹配 所 有 用 户 界 和 面 (form 表单 ) rBAb T uI HAAS E 7628; E:disabled 用 
于 匹配 所 有 用 户 界面 〈form 表单 ) 中 处 于 不 可 用 状态 的 了 元 素 。 

例如 ， 下 面 的 代码 使 用 enabled 伪 类 选择 占 设 置 所 有 处 于 可 用 状态 的 输入 元 么 的 背景 蔚 
f; 使 用 disabled 伪 类 选择 器 设置 折 有 处 于 禁用 状态 的 输入 元 素 的 背景 闫 色 。 




















代码 清单 19-13: enabled 与 disabled 选择 器 使 用 实例 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>E:enabled</title> 
<style type="text/css"> 
input:enabled { background: #ffff00; } 
input:disabled { background: #dddddd; } 
</style> 
</head> 
<body> 
<form method="post" action=""> 
姓名 : <input type="text" value="Tomcat" /> <br> 
性 别 : <input type="text" value=" 女 " /> <br> 
国籍 : <input type="text" disabled="disabled" value="Disneyland" /> <br> 


</form> 
</body> 
</html> 





代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 19-17 所 示 。 
| ea] 


Èy c [5 序 代码 /19719- on 三 


tä: [Tomcat 





TER m 
E: Disneyland 


图 19-17 enabled 与 disabled 选择 器 使 用 效果 


3. E::selection 

E::selection 匹配 卫 元 素 中 被 用 户 选中 或 处 于 高 亮 状态 的 部 分 。 目 前 “::selection” 选 择 髓 
只 可 以 应 用 于 少数 的 CSS 属性 ， 如 color. background. cursor 和 outline。 人 例如， 下面 的 代 但 
将 选 定 的 文本 设置 为 红色 。 








代码 清单 19-14: selection 选择 器 使 用 实例 
<!doctype html> 
<html> 
<head> 
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<meta charset="utf-8"> 
<title>E::selection</title> 
<style type="text/css"> 
::Selection { color: #F00; } 
</style> 
</head> 
<body> 
<p>ctrl+a 全 选 看 效果 或 者 使 用 鼠标 选择 文字 看 效果 </p> 
</body> 
</html> 


19.2.3 日 标 伪 类 选择 如 


E:target 用 于 匹配 相关 URL 指 问 的 E 元 素 。target 选择 器 用 在 当 用 户 点 击 页 面 中 一 个 链 
接 时 ， 访 页 面 跳 到 用 户 想 要 看 的 那 一 块 内 容 ， 使 用 target 选择 占 束 可 以 指定 那 一 块 的 样式 。 

接 下 来 看 一 个 target 选择 器 的 使 用 实例 。 页 面 中 为 两 个 div 元 素 定 义 了 书签 链接 ， 当 用 
户 点 击 了 页 面 中 的 链接 跳 转 到 指定 的 div WI, i% div WRH target 选择 器 设置 的 样式 
至 现 。 


























代码 清单 19-15: target 选择 器 使 用 实例 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>E:target</title> 
<style type="text/css"> 
:target { 
background-color: #00F; 
font-weight: bold; 
color: ZFFO; 
font-size: 24px; } 
</style> 
</head> 
<body> 
<div> 
«a href="#al1"> 跳 到 区 块 1</a> 
<a href="#a2"> 跳 到 区 块 2</a> 
</div> 
«div id="al"> 区 块 1</div> 
«p» PCHR 1 内容 </p> 
<p> 区 块 1 内 容 </p> 
<div id="a2" > 区 块 2</div> 
<p> 区 块 2 内 容 </p> 
<p> 区 块 2 内 容 </p> 
</body> 
</html 
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È 





图 19-18 target 选择 器 使 用 效果 


19.2.4 ”否定 伪 类 选择 春 








E:not(s) 匹 配 所 有 不 匹配 简单 选择 符 s 的 元 素 E。 如 来 想 对 某 个 结构 元 取 使 用 样式 ， 但 
是 叉 想 排除 这 个 元 素 下 面 的 茶 个 子 元 隶 ， 让 和 它 不 使 用 此 样式 ， 吏 可 以 使 用 它 。 例 如 下 面 的 





实例 代码 。 


代码 清单 19-16: 否定 伪 类 选择 器 使 用 实例 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>E:not(s)</title> 

«style type="text/css"> 
p:not(.abc) { background-color: ZF00 } 

</style> 

</head> 

<body> 
<p class="abc"> PL BU Pr AUG RUTR] EET s 的 元 素 E</p> 
<p class="cba"> 死 配 所 有 不 匹配 简单 选择 符 s 的 元 素 E</p> 
<p> 匹 配 所 有 不 匹配 简单 选择 符 s 的 元 素 E</p> 
«p class="abc"> 史 配 所 有 不 匹配 简单 选择 符 s 的 元 素 E</p> 
«p class="bca"> 史 配 所 有 不 匹配 简单 选择 符 s 的 元 素 E</p> 
«p class="abc"> 死 配 所 有 不 匹配 简单 选择 符 s 的 元 素 E</p> 

</body> 

</html> 


代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 19-19 所 示 。 
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MAATMAN A R LRE 


匹配 所 有 趟 匹配 简单 选择 罕 = 的 元 素 E 





图 19-19 MEDRAR AAEH AR 


19.3 兄弟 选择 器 








E~F 见 第 选择 器 用 来 此 配 E 元 素 之 后 的 E 元 素 ， 这 两 种 元 素 必 须 具 有 相同 的 父 元 系 《〈 在 
DOM 结构 中 ，E 和 F 所 匹配 的 元 素 应 该 在 同一 级 结构 上 )。 例 如 ，div~p 匹配 <div><p> 段 
1</p></div><div><p> 段 2</p></div><<p> 段 3</p> 中 的 <p> 段 3</p>, rf] 4 ze Ub Me <p> Ec 
1</p></div><div><p> 段 2</p>。 


例如 ， 下 面 的 代码 设置 div 元 到 之 后 的 每 一 个 l RWE RME. 


代码 清单 19-17: 兄弟 选择 器 使 用 实例 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>E~F</title> 
<style type="text/css"> 
div~ul { background: #ff0000; } 

</style> 
</head> 
<body> 
<p>U E 7628 ŽAJA F 7628. p? 
<div> 
«ul» 

-li2Jb5 </li> 

«i» Eli 

«iUi 
</ul> 
</div> 
«div» l5. E 75282 Ja H*) F 元素 .</div> 
«ul» 

«li2Jb5 </li> 

<li> Eli 

«diui 
</ul> 
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<h2> 匹 配 卫 7628 Zn Hf] F 元素 </h2> 
«ul» 
-i-Jb </li> 
«i» Ei 
«i545 «li» 
</ul> 
</body> 
</html> 


代码 在 Chrome 浏览 器 中 的 显示 效果 如 图 19-20 所 示 。 





匹配 E 元 素 之 后 的 F 元 素 


图 19-20” 兄 第 选择 右 使 用 效果 
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第 20 章 JavaScript 基础 


20.1 JavaScript 起 步 


20.1.1 JavaScript 人 简介 


JavaScript 是 由 Netscape 公司 开发 的 一 种 脚本 语言 (script language)， 称 为 描述 性 语言 ， 
具有 面向 对 象 的 能 力 ， 可 以 非常 自由 地 花 入 到 HTML/XHTML 文件 中 ， 从 而 更 便捷 地 开发 出 
可 交互 的 Web 网 页 。 

JavaScript 是 目 表 最 为 流行 的 客户 新 脚本 语言 ， 大 大 增强 了 网 页 的 交互 性 。JavaScript 语 
法 构成 与 C、C++、Java 类 似 ， 都 包括 if 语句 、while 循环 、 分 文选 择 以 及 运算 等 结构 ， 但 
也 仅 是 在 语法 上 的 相似 。 

初学 者 往往 认为 JavaScript 与 Java 是 同一 种 语言 ， 其 实 不 然 。Java 是 一 种 程序 语言 ， 而 
JavaScript 是 一 种 脚本 语言 ， 比 Java 简单 得 多 。 恋 者 不 要 在 名 称 上 混 请 两 者 ， 两 者 完全 不 相 
Fo JavaScript 语言 的 前 号称 为 LiveScript。 目 从 Sun 公司 推出 著名 的 Java 语言 后 ，Netscape 
公司 引进 了 Sun 公司 有 关 Java 的 程序 概念 ， 将 目 己 原 有 的 LiveScript 重新 进行 设计 ， 并 改名 
为 JavaScript。 

JavaScript EETA matr, HP Atg JavaScript 的 网 页 ， 网 页 里 的 JavaScript 
瓯 传 到 浏览 右 ， 由 浏览 器 对 此 作 处 理 。 前 面 提 到 的 下 拉 菜 单 、 验 证 表单 有 效 性 等 大 量 互动 性 
功能 ， 都 是 在 客户 端 完 成 的 ， 不 需要 和 Web Server 发 生 任何 数据 交换 ， 因 此 不 会 增加 Web 
Server 的 负担 。 用 JavaScript 编写 的 程序 需要 能 文 持 Javascript 语言 的 浏览 器 。 目 六 各 见 的 浏 
Và. n8 HD HE x Hf JavaScript. 

































































20.1.2 JavaScript 的 功能 特性 


JavaScript 的 主要 功能 特性 如 下 : 

(10 HPX H.» JavaScript 可 以 对 事件 的 触发 作出 啊 应 ， 而 不 需要 经 过 Web 服务 
程序 。 比 如 可 以 将 JavaScript 设置 为 当 某 个 事件 发 生 时 执行 ， 通 向 情况 下 在 表单 中 输入 
一 个 值 或 者 单 击 表单 的 提交 (Submit) 按钮 ，JavaScript 可 以 触发 任意 类 型 动作 来 啊 应 
用 户 事 件 。 

(2) JavaScript 可 以 为 HTML W ARMISSAN. JavaScript 可 以 通过 将 类 似 于 
document.write<"ddd"> 的 语句 放 入 HTML 中 ， 从 而 控制 HTML 文档 内 容 。 通 第 可 以 把 日 期 
和 时 间 写 入 文档 中 。JavaScript 的 document 对 象 可 以 指定 文档 背景 颜色 、 文 本 颜色 以 及 超级 
链接 颜色 ， 即 能 够 生成 动态 的 、 根 据 条 件 变 化 的 HTML 文档 的 能 力 。 

(3) JavaScript 可 以 校 验 数据 。JavaScript 可 以 在 表单 提交 前 对 表单 数据 进行 校 验 ， 这 可 
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以 减轻 服务 器 的 负担 。 

(4) JavaScript 是 跨 平 台 的 。JavaScript 的 运行 依赖 于 浏览 器 本 映 ， 而 与 操作 系统 环境 无 
关 ， 只 要 安装 能 文 持 JavaScript 浏览 姻 的 计算 机 束 可 以 正确 执行 。 

(5) JavaScript 可 以 创建 Cookie. Cookie 用 于 记录 访客 的 茶 些 信息 ， 在 页 面 乙 间 传 递 变 
量 。 例 如 可 以 利用 Cookie 记录 用 户 光 临 网 页 的 次 数 ， 或 者 访客 曾经 输入 过 的 信息 。 当 浏 咒 
某 网 站 时 ， 由 Web 服务 下 置 于 客户 端 便 往 上 一 个 非 背 小 的 文本 文件 ， 即 cookie， 可 以 记录 客 
户 端的 用 户 ID、 密 码 、 浏 览 过 的 网 页 、 停 留 的 时 间 等 信息 。 当 客户 再 次 来 到 访 网 站 时 ， 网 
站 通过 读 取 Cookie， 得 知 相 关 信 息 ， 束 可 以 做 出 相应 的 动作 。JavaScript 可 以 在 浏览 者 的 计 
算 机 上 存储 和 处 理 这 些 信 息 。 



































20.1.3 JavaScript 的 使 用 


在 网 页 中 加 入 JavaScript 有 两 种 方法 : 直接 在 HTML. 中 使 用 ， 或 使 用 外 部 的 JavaScript. 

1. 直接 在 HTML 中 使 用 

JavaScript 可 以 放 在 HTML 中 的 任何 位 置 ， 使 用 <script>*…… </script> bj s WE 3t n] EJ 
了 。 代 码 清 单 20-1 演示 了 如 何在 HTML 中 直接 使 用 JavaScript 脚本 。 





代码 清单 20-1: 在 HTML 中 直接 使 用 JavaScript 脚本 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 直 接 使 用 JavaScript 脚本 </title> 
</head> 
<body> 
«script type="text/Javascript"> 

document.write("Hello World!") 

</script> 
</body> 
</html>> 


代码 分 析 : 

这 里 的 JavaScript W Æ J HTML 的 <body> …… </body> 标签 中 o «script type= 
"text/javascript"> 和 </script> 4 Jr 3 w, as JavaScript 从 何 处 开始 ， 到 何 处 结束 。<script 
type="text/javascript"> 也 可 以 用 <script language=" Javascript" R, RI FPZ: 





<script language="Javascript"> 
document.write("Hello World!") 
</script> 


document.write () 字段 古 标准 的 JavaScript MS, HX va If] 55 AA HH o 


全 友情 提示 
(1) 在 C. CH, Java 这 些 传统 编程 语言 中 ， 每 一 行 的 语句 都 用 分 号 结 来 ， 而 在 编写 
JavaScript 程序 时 ， 每 一 行 语 句 结 来 的 分 号 是 可 选 的 。 
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(2) JavaScript 对 大 小 写 敏感 ， 如 关键 字 “while”， 不 能 写成 “While”。 
JavaScript i n] ELA $ HTML 的 <head>……</head> 标 签 中 ， 如 以 下 代码 所 示 : 


<html> 

<head> 

<title></title> 

<script type=" text/javascript" > 
</script> 

</head> 

<body> 

</body> 

</html> 


2. 使 用 外 部 的 JavaScript 

有 时 ， 为 了 提高 程序 代码 的 利用 率 ， 需 要 在 多 个 页 面 运行 同一 个 JavaScript 编写 的 程 
序 ， 这 时 可 以 将 JavaScript 写 在 一 个 外 部 文件 中 ， 并 将 其 你 存 为 一 个 以 js 为 扩展 名 的 外 部 
JavaScript 文件 ， 然 后 ， 在 HTML 中 调用 该 js 文件 。 调 用 格式 如 下 : 

















一 一 11 


«script src — "url" language-" Javascript" ^«/script^ 


url 是 要 加 载 的 JavaScript 文件 的 地 址 ， 举 例 说 明 : 
首先 建立 一 个 扩展 名 为 .js 的 JavaScript 文件 show.js， 文 件 内 容 如 下 : 





document.write("Hello World!") 
在 HTML 文件 中 调用 show.js 文件 ， 如 以 下 代码 所 示 : 


<body > 
<script srez"'show.js" language 
</script> 
</body> 


MO 


javascript" > 


D 友情 提示 
外 部 js 文件 不 要 加 <script language="javascript"> ... … </script> 或 <script type="text/ 


javascript" ... ... </script>. 


| 20.2 注释 


可 以 添加 注释 来 对 JavaScript 进行 解释 ， 以 提高 其 可 读 性 。 单 行 的 注释 以 “/” 开 始 : 多 
行 注释 以 “/*” 开 头 ， 以 “*/” 结 尾 。 如 以 下 代码 所 示 : 








«script type="text/javascript"> 
// 这 行 代码 输出 Hello World! 
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document.write(" Hello World!") ; 
PEATEREUA "78" JEXR, BL UP" SER. 

下 面 的 代码 将 输出 一 个 标题 和 一 个 段落 。*/ 
document.write("<h1>This is a header</h1>"); 
document.write("<p>This is a paragraph</p>"); 
</script> 


| 20.3 ”变量 


值 可 以 改变 的 量 称 为 变量 。 变 量 用 来 存储 信息 ， 可 以 理解 为 存储 信息 的 容器 。 在 
JavaScript 中 变量 的 值 可 以 更 改 。 可 以 使 用 变量 名 来 获得 或 者 修改 它 的 值 。 

1. 变量 的 命名 

变量 的 命名 规则 : 

(1) 只 能 由 字母 、 数 字 和 下 画 线 三 种 字符 组 成 ， 且 第 一 个 字符 必须 为 字母 或 下 画 线 。 

例如 : total. sum. today. sum, students. teacher. st toy. t 1 a 3 com 均 属 于 合法 的 
变量 名 ， 而 3sum. 3 book. a.ccc. M.Tom 均 属 于 非法 变量 名 。 

(2) 变量 名 对 大 小 写 敏 感 。 大 与 字母 和 小 写字 母 是 不 同 的 字符 。 

例如 : total AI TOTAL, sum 和 SUM 是 两 个 不 同 的 变量 名 。 爸 量 名 的 书写 尽量 写成 匈 名 
知 意 ， 以 增加 程序 的 可 读 性 。 

2. 变量 的 声明 

在 JavaScript 程序 中 使 用 变量 之 前 必须 声明 该 变量 。 变 量 的 声明 要 使 用 var 关键 学， 如 
以 下 代码 所 示 : 




































































var name ; 


var sum ; 


也 可 以 用 var 一 次 声明 多 个 变量 ， 如 以 下 代码 所 示 : 





var name , sum , value ; 


3. 变量 的 赋值 
可 以 在 声明 变量 时 为 变量 赋值 ， 如 以 下 代码 所 示 : 











var name-"tom" ; 
也 可 以 先 声 明 后 赋值 ， 如 以 下 代码 所 未: 


var name ; 


name--"tom"; 


也 可 以 一 次 为 多 个 变量 赋值 ， 如 以 下 代码 所 不: 





var name-"tom";value-3;student-"kate"; 
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变量 的 作用 域 
变量 的 作用 域 就 是 变量 在 程序 中 的 作用 范围 。 根 据 作用 域 ， 变 量 可 分 为 局 部 变量 和 全 局 
a. 
所 谓 局 部 变量 是 在 一 个 函数 内 部 定义 的 变量 ， 只 能 在 创建 它们 的 某 个 程序 或 函数 中 使 
Hj. ub. PARU: 


«script language-" javascript" type-"text/javascript"^ 
function fun() 1 
var name = "tom" ; /定义 局 部 变量 
document.write(name-" «br/7"); 





























j 
fun(); 
</script> 


ARASINAN: 

这 里 定义 的 name 变量 为 局 部 变量 ， 因 为 它 定 义 在 函数 fun O 的 内 部 ， 上 只 在 fun0 这 个 孙 
数 内 有 效 。 

全 局 变量 是 在 函数 之 外 声明 的 变量 ， 可 以 在 程序 中 定义 并 为 其 他 函数 所 公用 。 全 局 变量 
的 有 效 范 围 是 整个 程序 。 如 以 下 代码 所 示 : 


























«script language="jJavascript" type="text/Javascript"> 
var student-"Rose"; /定义 全 局 变量 
function fun() 1 
var name = "Tom" ; /定义 局 部 变量 
document.write(name-" «br/7"); 
document.write(student+"<br/>"); 
j 
function value() 1 document.write(student-"«br/^"); | 
fun(); 
value(); 
document.write(student); 
</script> 


程序 输出 结果 为 : 


Tom 
Rose 
Rose 
Rose 


代码 分 析 : 

这 里 定义 的 student 为 全 局 变量 ， 是 在 fun) value0 函 数 外 定义 的 ， 可 以 为 这 两 个 函数 
所 公用 ， 在 fhn0 和 valueO 中 都 引用 输出 了 这 个 变量 。 

在 函数 体内 部 ， 局 部 变量 的 优先 级 高 于 全 局 变量 。 如 果 将 一 个 局 部 变量 声明 的 变量 名 定 
义 为 与 全 局 变量 相同 ， 那 么 局 部 变量 将 有 效 地 屏蔽 全 局 变量 。 如 以 下 代码 所 未: 


























294 


JavaScript 基础 “| 第 20 LA 


«script language-" javascript" type-"text/javascript"^ 
var student-" Rose"; 
function fun()1 
var student = "Tom" ; 
document.write(student*"«br/7"); 


j 
fun(); 


document.write(student); 
输出 结果 为 : 


Tom 
Rose 


5， 变 量 无 块 级 作用 域 
BC, CH, Java 不 同 ，JavaScript 没有 块 级 作用 域 ， 在 函数 中 声明 的 所 有 变量 在 整个 了 
数 中 都 有 意义 。 如 以 下 代码 所 示 ; 











cA 


«script language="jJavascript" type="text/Javascript"> 
function fun(){ 
var i = 0; 
if(1 == 0){ 
var j = 0; 
for(var k = 0;k < 1;k ++){ document.write( k + "<br >"); } 
document.write( k + "<br />"); } 


document.write); 


j 
fun(); 
</script> 
输出 结果 为 : 
0 
l 
0 


20.4 运算 符 与 表达 式 








运算 符 就 是 完成 操作 的 一 系列 符号 ， 主 要 包括 : 赋值 运算 符 、 算 术 运 算 符 、 比 较 运 算 
符 、 逻 辑 运算 符 、 条 件 运 算 局 部 变量 、 位 操作 运算 符 和 字符 串 运 算 符 等 。 

表达 式 就 是 运算 符 和 操作 数 的 组 合 ， 如 axb+1+c。 表 达 式 主要 包括 :; 算术 表达 式 、 赋 值 
表达 式 、 条 件 表 达 式 以 及 布尔 表达 式 等 。 

1. 算 木 运算 符 

算术 运算 符 的 功能 和 用 法 见 表 20-1。 
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R 20-1 算术 运算 符 功 能 和 用 法 


i 算 Hu Ui —08j 运算 对 象 个 数 举 Al zoom 结 合 性 
= 
x*y 
x-6 

/ 除法 运算 符 双 目 运算 符 y-3 2 HERA 
x/y 
xs 

* 加 法 运算 符 双 目 运算 符 y=3 5 自 左 至 右 
xty 
x-6 

减法 运算 符 双 目 运算 符 y-3 3 自 左 至 右 
X-y 
mE 

% 求 余 运 算 符 双 目 运算 符 y-2 l 日 元 全 右 
XYoy 





算术 运算 符 按 照 先 乘除 后 加 减 的 顺序 进行 运算 。 
2. 赋值 运算 符 
赋值 运算 符 的 功能 和 用 法 见 表 20-2. 


表 20-2 ”赋值 运算 符 功 能 和 用 法 


i 算 符 | 运算 对 象 个 数 x — p Ee 
z 双 目 运算 符 —: 
m 双 目 运算 符 — 
+ 双 目 运算 符 —: 
, 双 目 运算 符 — 
m 双 目 运算 符 ^ — 





V A7 (VÀ 4H / 
V A7 d 4H / 





将 x 与 y 按 位 与 后 得 到 
Ie RES x 





将 x 与 y 按 位 异 或 的 结 
RIEZ x 





3. 逻辑 运算 符 
逻辑 运算 符 的 功能 和 用 法 见 表 20-3。 
表 20-3 逻辑 运算 符 功 能 和 用 法 
i: 算 符 说 — Hj 运算 对 象 个 数 2e RN 结 X 2 合 性 
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4. 逻辑 位 运算 符 
逻辑 位 运算 符 的 功能 和 用 法 见 表 20-4。 


表 20-4 逻辑 位 运算 符 功能 和 用 法 


E Wo & 明 运算 对 象 个 数 举例 & 5 
5， 移 位 运算 符 
移 位 运算 符 的 功能 和 用 法 见 表 20-5. 
表 20-5 移 位 运算 符 功 能 和 用 法 
6. 关系 运算 符 
关系 运算 符 的 功能 和 用 法 见 表 20-6。 





表 20-6 关系 运算 符 功能 和 用 法 


m * di 明 运算 对 象 个 数 结 m & 合 性 
Lat 等 于 运算 符 7== 返回 false Hc uh 
< 区 nis 
z 大 于 或 等 于 运算 和 His 
- 小 于 或 等 于 运算 答 nA 
7. 条 件 运 算 符 
条 件 运算 符 可 以 给 基于 条 件 的 变量 赋值 ， 要 求 有 3 个 操作 对 象 ， 义 称 为 三 目 运 算 符 。 
语法 : 
变量 名 =( 条 件 )? 值 1: 值 2 
例如 :“ (a>b) ? a: b” 为 一 个 条 件 表 达 式 。 执 行 顺序 为 : WR (a>b) 条 件 为 真 ， 则 
条 件 表达 式 取 值 为 4， 否则 取 值 为 b。 
公 友情 提示 
条 件 运 算 符 的 优先 级 比 关系 运算 符 和 算术 运算 符 都 低 ， 所 以 max= (a>b ) ?a: b 的 括号 
可 以 不 要 ， 直 接 写 成 max=a>b?a:b。 
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8， 自 增 、 自 减 运算 符 
自 增 、 自 减 运算 符 为 单 目 运算 符 ， 是 使 变量 值 增 1 或 减 1， 例 如 
-—i, e (在 使 用 i 之 前 ， 先 使 ;的 值 减 (加 ) D 
i-—. ier (在 使 用 i 之 后 ， 使 ;的 值 减 (加 ) 1) 
9. 去 号 运算 符 
逗号 表达 式 的 一 般 形式 为 ; 

表达 式 1， 表 达 式 2 


去 号 表达 式 的 执行 顺序 为 :， 先 求解 表达 式 1， 再 求解 表达 式 2。 整 个 逗号 表达 式 的 值 是 
表达 式 2 的 值 。 例 如 ， 表 达 式 “5+4，8+9”， 该 逗号 表达 式 的 值 为 17。 
运算 符 的 优先 级 这 循 如 下 规则 : 
(1) (2) 
单 日 运算 符 算数 运算 符 
| | 
X Hie SERT 移 位 运算 符 
| | 
三 目 运算 符 AURIS MUN 
| 
逻辑 位 运算 符 
| 
ABl LUI 
| 
条 件 运 算 符 
| 
赋值 运算 符 











20.5 ”流程 控制 


在 任何 一 种 语言 中 ， 程 序 的 循环 控制 都 是 必需 的 ， 它 可 以 使 整个 程序 条 理性 更 强 。 
JavaScript 常用 的 循环 控制 结构 包括 以 下 几 种 : 

(1) 让 条 件 语句 。 

(2) switch 条 件 语 句 。 

(3) for 循环 语句 。 

(4) for in 语句 。 

(5) while 和 do-while 循环 语句 。 

(6) break 和 continue 语句 。 
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20.5.1 if RFE 





1. if 语句 
t 4 $5 TRAE ATERK ERI TT, gn] EH i£ EA. 
基本 语法 : 





这 (条 件 ){ 条 件 成 立时 执行 代码 } 
这 种 让 语句 执行 过 程 如 图 2071 Dra 





图 20-1 if( 表 达 式 ) 语 句 流 程 


代码 清单 20-2: if 语句 的 使 用 实例 
«script type="text/Javascript"> 
var name-"Tom" 
if (name--"Tom") { document.write("My name is Tom") } 
</script> 


2. if...else 语句 
如 果 希 望 条 件 成 立时 执行 一 段 代 人 码 ， 而 条 件 不 成 立时 执行 为 一 段 代 人 码 ， 那 么 可 以 使 用 
if..else 语句 。 
基本 语法 : 
if APRI 
条 件 成 立时 执行 此 代码 
Yelse(. 条 件 不 成 立时 执行 此 代码 1 


这 种 if...else 语句 执行 过 程 如 图 20-2 所 示 。 





图 20-2 if … else 语句 流程 
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代码 清单 20-3: if...else 语句 的 使 用 实例 
«script type="text/Javascript"> 
var name-"Tom" 
if (name--" Tom") { 
document.write("name is Tom") 
velse 1 document.write("name is Rose") | 
</script> 


3. 多重 if...else 语句 
多 重 if...else 语句 可 以 适应 多 种 情况 下 选择 其 中 一 种 情况 执行 的 问题 。 
基本 语法 : 


if (条件 1){ 
条 件 1 成 立时 执行 代码 
velse f( 条 件 2)1 
条 件 2 成 立时 执行 代码 
:else1 
条 件 1 和 条 件 2 均 不 成 并 时 执行 代码 

















图 20-3 ZŒ if- else 语句 流程 


代码 清单 20-4: 多 重 if...else 语句 的 使 用 实例 
«script type-"text/javascript" 
var value-15; 
if (value«10)( 
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document.write(''The first find") 
Jelse if (value«20)( 
document.write('"'The second find") 
}else ( document.write("' The third find") } 
</script> 


20.5.2 switch 语句 


switch 语句 为 多 分 文选 择 语句 ， 是 让 语句 的 一 种 延伸 ， 相 比 证 语句 而 言 ， 多 分 文 语句 增 
加 了 程序 的 可 读 性 。 
基本 语法 : 
switch 〈 表 达 式 ) ( 
case ”常量 表达 式 1: 语句 1; break 
case EKAA 2: 语句 2; break 
case ”常量 表达 式 3: 语句 3; ” break 


case 各 量 表达 式 n: 语句 n; break 
default: 语句 n+l 
j 

语法 说 明 : 

(1) switch 后 面 括 弧 内 的 “表达 式 ” ANSI 标准 允许 为 任何 类 型 ， 当 表达 式 值 与 某 一 个 
case 值 相等 时 ， 束 执行 case 后 面 的 语句 。 寿 所 有 的 case 中 背 量 表达 式 与 表达 式 的 值 均 不 相 
等 ， 则 执行 default 后 面 的 语句 。 

(2) 每 一 个 case 语句 后 的 结尾 都 使 用 了 关键 字 “break”， 作 用 是 使 程序 跳 到 switch 语句 
的 结尾 处 ， 也 就 是 一 旦 找到 与 乙 匹 配 的 值 ， 将 不 执行 后 面 的 程序 。 关 于 break 在 后 面 还 要 详 
细 介 绍 。 

(3) 如 果 没 有 “break”， 执行 完 case 后 面 的 语句 后 ， 流 程控 制 转移 到 下 一 个 case 继续 执 
fT. "case 第 量 表达 式 ” 只 起 语句 标号 作用 ， 不 进行 条 件 判 断 。 









































代码 清单 20-5: switch 语句 的 使 用 实例 
«script type-"text/Javascript" 

var value-15; 

switch(value)( 
case 12:document.write('' The first find" );break; 
case 14:document.write("" The second find');break; 
case 15:document.write(" The third find" );break; 
default:document.write('" other"); 


} 


</script> 


20.5.3 for 循环 语句 
在 脚本 的 运行 次 数 已 确定 的 情况 下 使 用 for 循环 。 





301 


HTML5, CSS3, JavaScript 开发 手册 


基本 语法 : 
for (变量 = 开始 值 ;变量 <= 结 束 值 ;变量 = 变量 + 步 进 值 ) { 需 执 行 的 代码 } 


每 次 循环 重复 之 前 ， 都 要 测试 循环 条 件 ， 如 来 测试 成 功 ， 则 执行 循环 体 语 句 代 人 码 ; 如 来 
测试 失败 ， 则 不 执行 循环 体内 语句 代码 ， 而 执行 案 跟 在 循环 后 的 第 一 行 代码 。 当 执行 该 循环 
时 ， 循 环 变量 不 断 被 更新， 一般 做 目 增 或 目 减 运算 。 




















A 友情 提示 
在 设置 循环 条 件 时 ， 如 果 和 循环 条 件 一 直 满 足 ， 则 导致 程序 无 限 循环 ( 死 循环 )， 这 通常 
不 是 我 们 所 期 望 的 。 


代码 清单 20-6: for 循环 语句 的 使 用 实例 
«script type-"text/javascript" 
for (i = 0; i <= 8; i++){ document.write(" The number is ”+ i-" «br />”) | 


</script> 
输出 结果 为 : 


The number is 0 
The number is 1 
The number is 2 
The number is 3 
The number is 4 
The number is 5 
The number is 6 
The number is 7 
The number is 8 


20.5.4 for...in i£ 


for 还 可 以 与 in KAEH, SEDE — PEE REA; NOKOR D] — POSEE B PUE REIP EXC 
FF JS ERA- AH) TH TR. MAPARI 7 UG. MERAH RREAN R 
属性 进行 一 次 操作 。 


for EEK in 对 象 名 ){ 在 此 执行 代码 } 











代码 清单 20-7: 使 用 for ... in 循环 遍历 数组 的 实例 
«script type-"text/Javascript" 
var name 
var namelist- new Array() 
namelist[0] = "Tom" 
namelist[1] = "Kate" 


namelist[2] ^ "Rose" 
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namelist[3] = "White" 
for (name in namelist)| document.write(namelist[name] + "«br />”) ) 


</script> 

输出 结果 为 : 
Tom 
Kate 
Rose 
White 


20.5.5 while 语句 和 do-while 语句 


1. while 语句 
while 语句 和 for 语句 类 似 ， 人 允许 JavaScript 重复 执行 某 些 动作 。 
基本 语法 : 

while 〈 循 环 条 件 表达 式 ) { 需要 执行 的 循环 体 语句 } 


while 语句 的 流程 结构 如 图 20-4 所 示 。 


循环 体 语 名 





图 20-4 while 语句 流程 图 


代码 清单 20-8: while 语句 的 使 用 实例 
«script type="text/Javascript"> 
var i = 0; 
while (i <= 5)( 
document.write(" The number is "+ i+"<br>"); 


i++; 
} 
</script> 
输出 结果 为 : 


The number 1s 0 
The number 1s 1 
The number 1s 2 
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The number is 3 
The number is 4 
The number is 5 


2. do-while 语句 
do-while 语句 与 while 类 似 ， 不 同 的 是 先 执行 循环 体 ， 然 后 再 判断 循环 条 件 是 否 成 立 ， 
执行 顺序 与 while 正好 相反 。do-while 循环 中 即使 条 件 为 false， 也 人 至少 执 行 一 过 循环 体 中 的 
代码 ， 因 为 其 中 的 代码 执行 后 才 会 进行 条 件 验 证 。 
do( 需要 执行 的 循环 体 语 句 } 
while (HRAN) 


do-while 语句 的 流程 结构 如 图 20-5 所 示 。 








循环 体 语 名 


图 20-5 do-while 语句 流程 图 


代码 清单 20-9: do-while 语句 的 使 用 实例 
«script type-"text/Javascript" 
var 170; 
do ( 
document.write(" The number is " + ie" «br >"); 
i++; 
} 
while (i«—5) 
</script> 


20.5.6 break 语句 和 continue 语句 


1. break 语句 
break 语句 的 作用 除了 前 面 介绍 的 跳出 switch 结构 、 继 续 执行 switch 后 面 的 语句 外 ， 还 
可 以 用 来 从 循环 体内 跳出 ， 结 束 循环 。 





程序 20-10: break 语句 的 使 用 实例 
«script type="text/Javascript"> 
Var 1; 
for (i=0;i<=8;i++){ 
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if (i==4){ break; } 
document.write(" The number is " + i-" «br/»'); 


} 
</script> 
输出 结果 为 : 


The number ls 0 
The number ls 1 
The number is 2 
The number ls 3 


2. continue 语句 


continue 语句 结束 本 次 循环 ， 即 终止 当前 的 循环 ， 然 后 从 下 一 个 值 继续 执行 。 


代码 清单 20-11: continue 语句 的 使 用 实例 
«script type-"text/javascript" 
Var i; 
for (i=0;i<=8;i++){ 
if (1i==4){ continue; } 
document.write(" The number is ”+ i-" «br/»"; 


} 
</script> 
输出 结果 为 : 


The number is 0 
The number is 1 
The number is 2 
The number ls 3 
The number is 5 
The number is 6 
The number is 7 
The number is 8 


从 break 和 continue 这 两 个 实例 中 可 以 看 到 二 者 的 区 别 : break 语句 会 结束 整个 循环 ， 
不 再 判断 执行 循环 的 条 件 是 否 成 立 ; continue 语句 只 是 结束 本 次 循环 ， 而 不 是 结束 整个 循 
环 的 执行 。 





20.6 AŽ 





-种 程序 设计 语言 都 有 水 数 ，JavaScript 也 不 例外 。 这 里 主要 从 函数 的 定义 和 调用 来 
讨论 JavaScript 中 水 数 的 用 法 。 可 以 在 页 面 的 任何 位 置 调用 函数 ， 如 果 函 数 航 入 在 一 个 外 部 
的 .js 文件 中 ， 甚 至 可 以 从 其 他 的 页 面 中 调用 。 
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20.6.1 4E X AŽ 


JavaScript FF If] R ŽOM T O MCA 23 ER ZUR LER CREE e 
无 参数 函数 的 定义 形式 : 


function 函数 名 0{ RAURIS... } 
无 参数 函数 一 般 个 需要 返回 函数 仁 ， 例 如 ; 








«script type="text/javascript"> 
function showfun() | alert("hello world") } 
</script> 


AERA — REN : 
function PAZ (varl,var2,..,varX)( — PRIUS... } 








varl, var2 等 指 的 是 传 入 函数 的 变量 或 值 。 

& 友情 提示 

JavaScript 对 字母 的 大 小 写 敏 感 。“function” 这 个 词 必须 是 小 写 的 ， 
错 。 另 外 需要 注意 的 是 ， 必 须 使 用 大 小 写 完 全 相同 的 函数 名 来 调用 函数 


20.6.2 return 语句 


否则 JavaScript 报 


通 第 ， 我 们 希望 函数 调用 时 主 调用 函数 能 得 到 一 个 确定 的 值 ， 这 就 是 函数 的 返回 
值 。 函 数 的 返回 值 是 通过 函数 中 的 return 语句 获得 的 。 因 此 ， 需 要 返回 菏 个 值 的 函数 必 





须 使 用 return iE. 


function add (a,b) { 
x-atb 
return x 


| 
"AUi FH Erie BRA o URN PA 
value-add (8,3) 
而 从 add O 函数 返回 的 值 是 11， 这 个 值 会 存储 在 名 为 value 的 变量 中 。 
20.6.3” 国 数 的 调用 


下 面 用 几 个 实例 说 明 如 何在 JavaScript 中 使 用 函数 。 
参数 函数 





无 参数 函数 没有 返回 值 ， 在 下 面 的 实例 中 通过 showfun 0 来 调用 无 参数 函数 。 


306 


JavaScript 基础 “| 第 20 X 


代码 清单 20-12: 无 参数 函数 的 使 用 实例 
«script type-"text/javascript" 
function showfun()( document.write(" Hello World !"') ) 
showfun(); 
</script> 


输出 结果 为 : 
Hello World ! 
2. 有 参数 函数 


代码 清单 20-13: 有 参数 函数 的 使 用 实例 
«script type="text/Javascript"> 
function add (a,b) ( 
var c; 
c= a + b; 
return c; /返回 结果 
j 
var value = add(16,7); /调用 函数 
document.write(value); /输出 值 


</script> 
输出 结果 为 : 
23 


3. 使 用 函数 直接 量 
如 果 函 数 的 下 接 量 是 一 个 表达 式 ， 则 可 以 定义 成 匿名 函数 ， 和 朋 接 量 的 语法 与 有 参数 的 
function 函数 闫 似 ， 只 作为 一 个 表达 式 ， 无 需 定义 图 数 多。 




















代码 清单 20-14: 函数 直接 量 的 使 用 实例 
«script type-"text/javascript" 
var add-function add (a,b) 1 
var C; 
c= a + b; 
return c; /返回 结果 
j 
var value = add(18,7); /调用 函数 
document.write(value); /输出 值 


</script> 
输出 结果 为 : 
25 


4. Function 构造 函数 


构 霹 函数 的 一 般 格式 如 下 : 
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变量 名 =new Function (参数 1, 2243, 233, ...... > SN. KU) 
Function 构造 函数 可 以 接受 任意 多 个 参数 ， 最 后 一 个 参数 为 图 数 体 ， 其 中 可 包含 


任何 JavaScript 语句 。 如 果 没 有 参数 ， 只 和 需 给 构造 函数 传递 一 个 字符 串 《函数 体 ) 即 
HJ. 





D 友情 提示 
这 里 的 Function 的 “F” 为 大 写 ， 而 不 是 小 写 。 


Function 构造 函数 等 价 于 : 


变量 名 =Function (参数 1, 23, 233, ...... ， 参 数 N) { 函数 体 } 


代码 清单 20-15: Function 构造 函数 的 使 用 实例 
«script type-"text/Javascript" 
var add- new Function("a","b',"return a+b"); //Function 构造 函数 
var value-add(18,7); /调用 函数 ， 传 递 数据 。 


document.write(value); /输出 结果 


</script> 
输出 结果 为 : 
25 


5. 将 函数 赋值 给 对 象 的 属性 。 


代码 清单 20-16: 将 函数 赋值 给 对 象 的 属性 实例 
<script type="text/Javascript"> 
var value-new Object(); 
/将 Function 函数 赋值 给 value 的 add 属性 
value.add-new Function(''a","b'',"return at+b"); 
var result-value.add(18,19); 


document.write(result); 


</script> 
输出 结果 为 : 
37 





当然 也 可 以 写成 如 下 形式 ， 这 两 种 书写 方式 是 等 价 的 。 


«script type="text/Javascript"> 
var value-new Object(); 
value.add-function( a , b) ( return a+b 1; 
var result-value.add(18,19); 
document.write(result); 


</script> 
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20.7 ”消息 对 话 框 


对 话 框 是 用 户 与 系统 交互 的 界面 ，JavaScript 中 主要 包括 三 种 消息 对 话 框 ， 分 别 为 警告 
对 话 框 、 信 息 提示 对 话 框 和 确认 对 话 框 。 

1. 创建 警告 对 话 框 

警告 对 话 框 经 常用 于 确保 用 户 可 以 得 到 某 些 信息 。 











基本 语法 : 
alert(" XA") 
HE EAERI a Hr md WE" TRHLA BESRAEXETTTRTE. SETS ERR 


如 图 20-6 PTR o 








图 20-6 警告 对 话 框 效果 


代码 清单 20-17: 创建 警告 对 话 框 的 实例 
«script type-"text/javascript" 
function disp alert()( alert("' 这 是 警告 对 话 框 ， 对 您 的 操作 提出 警告 。'); } 
</script> 
</head> 
<body> 





<input type="button" onclick-"disp alert()" value=" 显 示警 告 对 话 框 " /> 
</body> 





2. 创建 信息 提示 对 话 框 
提示 对 话 框 丝 香 用 于 提示 用 户 在 进入 页 面前 输入 未 个 值 。 
基本 语法 : 


prompt(" 3 As", SJGA fH") 














当 所 示 对 pp 用 尸 需 要 输入 条 个 值 或 者 设置 默认 值 ， 然 后 点 击 “ 确 认 ” 或 “ 取 
消 ” 按 钮 才能 继续 操作 。 如 过 用 己 点击 “确认 ”按钮 ， 返 回 值 为 输入 的 值 。 如 末 用 户 点 击 
“取消 ”按钮 ， pues null。 信 息 提示 对 话 框 效 灯 如 图 2077 HIZR o 
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Explorer 用 户 提示 


脚本 提示 : 
请 输入 正确 的 信息 !141 


|Informati on| 





图 20-7 所 示 对 话 框 效果 


代码 清单 20-18: 一 个 创建 信息 提示 对 话 框 的 部 分 代码 
«script type="text/Javascript"> 
function disp prompt() ( prompt(" 请 输入 正确 的 信息 !!!","Information"); } 





</script> 
</head> 
<body> 
«input type="button" onclick-"disp prompt()" value=" 显 示 提 示 对 话 框 " /> 
</body> 


3. 创建 确认 对 话 框 
确认 对 话 杠 用 于 使 用 户 可 以 验证 或 者 接受 某 些 信息 。 
基本 语法 : 
confirm(" CZ") 
当 确 认 对 话 框 出 现 后 ， 用 户 需 要 点 击 “ 确 定 ” 或 者 “取消 ”按钮 才能 继续 进行 操作 。 如 
RAF A MA” E, BREEN trues WRAP A RK” Jt BEHAN false。 
确认 对 话 框 效 末 如 网 20-8 所 示 。 


Windows Internet Explorer 

















2) 确认 信息 ， 请 单 击 确认 按钮 4 t 





图 20-8 确认 对 话 框 效果 


代码 清单 20-19: 一 个 创建 确认 对 话 框 的 部 分 代码 

«script type="text/Javascript"> 
function disp confirm(){ 

var in 人 =confirm(" 人 确认 信息 ， 请 单 击 人 确认 按钮 11") 

if (inf-—-true)1 

document.write(" 你 单 击 了 确认 按钮 ， 返 回 true!!") 

Jelse( document.write(" 你 单 击 了 取消 按钮 ， 返 回 null!!") } 
j 
</script> 
</head> 
<body> 

<input type="button" onclick-"disp confirm()" value=" 显 示 确 认 对 话 框 " /> 

</body> 
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| 20.8 异常 处 理 


20.8.1 dij vr try-catch-finally ) 


如 采 程 序 在 运行 时 引发 了 一 个 错误 ， 束 会 弹出 一 个 与 该 错误 对 应 的 异常 类 对 象 。 在 
JavaScript 中 使 用 try-catch-finally 语句 进行 异常 处 理 。 
基本 语法 : 








try{ 
要 运行 的 程序 代码 
}catch( 寞 党 类 型 ) { 
异常 处 理 语句 








finally{ 语句 块 } 
uy 块 用 一 对 大 括号 如 指定 一 段 代 码 ， 这 段 代码 为 异常 处 理 所 需 的 代码 块 。try 块 后 至 少 


有 一 个 catch 或 finally。catch 块 指定 了 可 以 捕获 的 民利 类 型 ， 并 包含 了 一 个 并 篆 处 理 程序 。 
最 后 的 finally 块 为 可 选项 ， 无 论 try 块 中 是 否 产 生 异 常 ， 都 会 被 执行 。 














代码 清单 20-20: 一 个 捕获 异常 的 实例 
«script type="text/Javascript"> 
function exceptionTest() { 


try { 
CreateException(); // 创 建 一 个 寞 律 
} catch(ex) {// 捕 获 异 常 
alert(ex.number+"\n"+ex.description); /处 理 异 名 
} finally { alert(" 测 试 结束 "); } 
j 
</script> 


</head> 


<body> 
<input type="button" value=" i zt?" onclick-"exceptionTest()" /> 
</body> 


20.8.2 IH (throw ) 


在 JavaScript 中 ， 当 运行 发 生 错误 或 明确 地 使 用 throw 时 会 弹出 错误 提示 ， 可 以 使 用 try- 
catch-finally 捕获 寞 第 。 
基本 语法 : 


throw ”异常 对 象 


throw 声明 的 作用 是 创建 exception CG), 5 try...catch 声明 配合 使 用 ， 以 达到 控制 
程序 并 产生 错误 消息 的 目的 。 
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代码 清单 20-21: 一 个 声明 异常 的 脚本 代码 
<script type="text/Javascript"> 
var inf=prompt(" 请 输入 10 至 18 之 间 的 数字 :","") 
try{ 
if(inf<10) 
throw "Err1" 
else if(inf^18) 
throw "Err2" 
} catch(er)( 
if(er-—"Err1") 
document.write(" 输 入 错误 ， 输 入 值 过 小 !") 
if(er == "Err2") 
document.write(" 输 入 错误 ， 输 入 值 过 大 ") 
j 


</script> 


当 信息 提示 对 话 框 中 输入 小 于 10 或 者 大 于 18 WRAAE, FETMA h IEA e 


| 209 内 置 对 象 


JavaScript 是 一 种 解释 型 的 、 面 问 对 象 的 编程 语言 (OOP )， 包 含 了 很 多 内 置 
JavaScript 对 和 象 ， 如 字符 串 、 日 期 、 数 组 、 逻 辑 、 算 术 等 。JavaScript 中 的 对 象 是 由 属性 
(properties) 和 方法 (methods) 两 个 基本 元 系 构 成 的 。 前 者 是 指 与 对 象 有 关 的 值 ， 后 
者 是 对 象 可 以 执行 的 行为 。 本 节 将 具体 介绍 内 置 JavaScript 对 象 方法 ， 并 针对 一 些 难 理解 
的 内 置 对 象 方法 举例 说 明 。 

20.91 学 符 串 内 置 对 银 方 法 

1. bigO 

用 法 : stringObject.big(). 

VER]: 将 字符 串 显 示 为 大 写字 人体。 

举例 : 





























«script type-"text/javascript" 
var str-"One World One Dream" 
document.write(str.big()) 
</script> 


2. blink O 

用 法 : stringObject.blink(). 

EH: KTR RENNI AR. 
3. bold O 

用 法 : stringObject.bold(). 

作用 : 将 字符 串 设置 为 粗 体 。 
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4. charAt() 
用 法 : stringObject.charAt(index). 


Index 是 字符 在 字符 串 中 的 下 标 索 引 ， 个 字符 索引 值 为 0。 





VER]: 返回 字符 绅 指定 位 置 的 字符 。 
举例 说 明 : 


«script type-"text/javascript" 
var str-"One World One Dream" 
document.write(str.charAt(4)) 
</script> 


输出 : W 

5. charCodeAt() 

用 法 : stringObject.charCodeAt(index). 

TERI: 返回 字符 串 指 定位 置 字符 的 Unicode 编码 。 
6. concat() 








用 法 : stringObject.concat(stringl, string2, +++ ， StringN)e 





EH: 对 字符 串 进 行 连接 。 
举例 说 明 : 


«script type-"text/javascript" 
var strl="One World " 
var str2-"One Dream!" 
document. write(str] .concat(str2)) 
</script> 


7. fixed() 

用 法 : stringObject.fixed(). 

EH: 将 字符 串 显 示 为 打印 机 和 字体 。 
8. fontcolor() 

用 法 : stringObject.fontcolor(color)。 














第 20* 


颜色 值 参数 必须 是 颜色 名 (red)、RGB 值 (rgb(255,0,0)) 或 者 十 六 进 制 数 (#FF0000)。 








作用 : 指定 字符 串 字 体 闫 色 。 

9. fontsize() 

用 法 : stringObject.fontsize(size)« 

参数 size 必须 是 从 1 至 7 IUE. 

EH: 指定 字符 串 字 体 的 大 小 。 

10. indexOf() 

用 法 : stringObject.indexOf(searchValue,fromIndex). 








参数 searchValue 是 需要 检索 的 字符 捉 ， 为 必 选 参数 ;人 参数 fomIndex 是 在 字符 串 中 检索 
则 从 第 一 





的 位 置 ， 也 是 必 选 参数 ， 其 取 值 范围 为 从 0 到 字符 种 长 度 减 1。 





个 字符 检索 。 


如 采访 参数 缺 管 ， 
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作用 : 检索 字符 串 中 字符 或 子 字 符 串 的 位 置 ， 如 果 没 有 检索 到 要 检索 的 字符 溃 值 ， 则 返 





[H|-1 o 
举例 说 明 : 
«script type-"text/javascript" 
var str-"One World One Dream!" 
document.write(str.indexOf(" World") 
</script> 
11. italics() 


用 法 : stringObject.italics(). 

EH: 将 字符 串 显 示 为 斜体 子 。 

12. lastlndexOf() 

用 法 : stringObject.lastndexOf(searchValue,fromIndex). 

EH: 检索 一 个 指定 的 字符 串 值 最 后 出 现 的 位 置 ， 在 字符 串 中 指定 位 置 从 后 同 前 检索 ， 
如 有 果 没 有 检索 到 要 检索 的 字符 串 值 ， 则 该 方法 返回 -1。 参 见 indexOf0 的 用 法 。 

13. link() 

用 法 : stringObject.link(url) 

作用 : 字符 串 显 示 为 超 链接 。 

举例 说 明 : 























«script type-"text/javascript" 
var str-" T2 Jf |j " 
document.write(str.link("http://www.sohu.com.cn")) 


</script> 


14. localeCompare() 

用 法 : stringObject.localeCompare(targetStr). 

作用 : 比较 两 个 字符 串 ， 如 果 stringObject 小 于 targetStr， 则 localeCompare() 返回 小 
于 0 的 数 。 如 果 stringObject 大 于 targetSttr， 则 返回 大 于 0 的 数 。 如 果 两 个 字符 串 相 等 ， 
或 根据 本 地 排 夺 规则 没有 区 别 ， 则 返回 o. 

15. match() 

用 法 : stringObject.match(searchvalue). 

作用 : 碍 找 指定 的 衬 符 串 ， 如 条 没 有 可 匹配 的 值 ， 则 返回 null. 

举例 说 明 : 





«script type-"text/javascript" 
var str-"One World One Dream!" 
document.write(str.match(" World") 


</script> 


16. replace() 
用 法 : stringObject.replace(targetString,newString). 
作用 : 符 换 字符 果 中 的 茶 些 字符 。 
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举例 说 明 : 


«script type-"text/javascript" 
var str-"Today is Monday" 
document.write(str.replace(/Monday/, "Sunday")) 
</script> 


17. search() 

用 法 : stringObject.search(searchString)。 

EH: 在 字符 串 中 找到 指定 字符 或 字符 串 的 位 置 。 
举例 说 明 : 


«script type-"text/javascript" 
var str-"One World One Dream!" 
document.write(str.search(/World/ )) 
</script> 


18. slice() 

用 法 : stringObject.slice(start,end). 

参数 start 为 要 抽取 的 字符 串 片 段 的 起 始 位 置 。 如 果 是 负数 ， 则 该 参数 规定 从 字符 串 尾 部 
开始 算 起 ， 即 值 为 -1， 此 参数 为 必 选 参数 ;参数 end 是 抽取 字符 串 卢 段 在 结尾 处 的 标记 ， 此 








参数 为 可 选 参数 。 
作用 : 将 字符 是 的 部 分 字符 捉 取 出 来 ， 并 返回 剩余 部 分 。 
举例 说 明 : 


«script type-"text/javascript" 
var str-"One World One Dream!" 
document.write(str.slice(0,9)) 
</script> 


输出 : One World 

19. small() 

用 法 : stringObject.small(). 

EH: 将 字 付 串 显示 为 小 写字 体 。 

20. split() 

用 法 : stringObject.split(separator, howmany)。 

参数 separator 为 必 选 参数 ， 是 字符 串 或 正则 表达 式 ; 参数 howmany 为 可 选 参数 ， 议 
数 可 指定 返回 数组 的 最 大 长 度 。 

作用 : 将 字符 串 分 割 成 字符 串 效 组 。 

21. strike() 

用 法 : stringObject.strike(). 

作用 : 用 删除 线 删 除 指定 的 字符 串 。 

22. sub() 

用 法 : stringObject.sub(). 




















v 
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作用 : 将 字符 串 显 示 为 下 标 。 

23. substr() 

用 法 : stringObject.substr(start,length). 
作用 : 在 字符 串 中 抽取 从 start 开始 的 指定 数目 的 字符 。 
24. substring() 

用 法 : stringObject.substring(start,stop). 
作用 : 抽取 字符 串 中 两 个 指定 位 置 乙 间 的 字符 。 
25. sup() 

用 法 : stringObject.sup(). 

作用 : 为 字符 串 添加 上 标 。 

26. toLowerCase() 

用 法 : stringObject.toLowerCase() 
EH: 将 字符 串 转 化 为 小 写 。 

2/. toUpperCase() 

用 法 : stringObject.toUpperCase() 

EH: 将 字符 串 转 化 为 大 写 。 

28. toSource() 

用 法 : object.toSource() 

作用 : 显示 对 象 的 源 代 码 。 

29. toString() 

用 法 : stringObject.toString() 

TERI: 返回 字符 串 。 

30. valueOf() 

用 法 : stringObject.valueOf(). 

作用 : 返回 字符 果 对 象 的 原始 值 。 
31. Constructor 

用 法 : object.constructor. 

作用 : 创建 对 象 的 引用 。 

举例 说 明 : 




















«script type="text/Javascript"> 
var test=new String(); 
if(test.constructor==Array){ document.write("This is an Array"); | 
if(test.constructor--String) (| document.write("This is a String"); } 
</script> 


输出 : This is a String 
32. length 

用 法 : object.length 
EH: 返回 字符 串 长 度 。 
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举例 说 明 : 
«script type="text/Javascript"> 
var str="One World One Dream"; 
document. write(str.length); 
</script> 
33. prototype 
用 法 : object.prototype.name=value。 


作用 : 人 允许 同 对 象 添 加 属性 和 方法 。 
20.9.2 ”布尔 型 内 置 对 象 方法 


1. toSource() 

用 法 : object.toSource(). 

作用 : 显示 对 象 的 源 代 码 。 

2. toString() 

用 法 : booleanObject.toString(). 

EH: 将 布尔 型 转换 为 字符 串 ， 并 返回 结 琳 。 
3. valueOf() 

用 法 : booleanObject.valueOf(). 

作用 : 返回 布尔 对 象 的 原始 值 。 


20.9.3 ”数组 内 置 对 象 方法 








1. concat() 

用 法 : arrayObject.concat(arrayl, array2, =+ ; arrayN)e 
作用 : 将 一 个 或 多 个 数组 连接 成 一 个 数组 。 

举例 说 明 : 


«script type-"text/javascript" 

var arrayl = new Array(2) 

array1[0] = "One"; 

array1[1] = "Two"; 

var array2 — new Array(2) 

array2[0] = "Three"; 

array2[1] = "Four"; 

document.write(array 1 .concat(array2)); 
</script> 


输出 结果 为 : One,Two,Three,Four 

2. join() 

用 法 : arrayObject.join(separator). 

参数 separator 为 可 选 参 数 ， 用 于 指定 有 的 分 割 符 ， 如 逗号 。 
VER]: 将 数组 元 素 合 并 成 一 个 字符 串 。 

举例 说 明 : 
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«script type="text/Javascript"> 
var array 1 = new Array(4) 
array 1[0] = "One" 
array1[1] = "Two" 
array 1[2] = "Three" 
array 1[3] = "Four" 
document. write(array 1.join(",")) 


</script> 


输出 结果 : One, Two, Three,Four 

3. pop() 

用 法 : arrayObject.popO. 

作用 : 删除 并 返回 数组 的 最 后 一 个 元 素 。 
举例 说 明 : 


«script type-"text/javascript" 
var arrayl = new Array(4) 
array 1[0] = "One" 
array 1[1] = "Two" 
array 1[2] = "Three" 
array 1[3] = "Four" 
document.write(array 1 .pop()) 

</script> 


hR: Four 

4. push() 

用 法 : arrayObject.push(newelementl )newelement,....,newelementN). 
WEH: 同 数 组 的 末尾 谎 加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 值 。 
举例 说 明 : 








«script type-"text/javascript" 

var arrayl = new Array(4) 

array 1[0] = "One" 

array1[1] = "Two" 

array 1[2] = "Three" 

array 1[3] = "Four" 

document.write(array 1.push("Five")) 
</script> 


输出 结果 : 5 

5. reverse() 

用 法 : arrayObject.reverse(). 

TERI: 将 数组 中 的 元 素 反 向 排列 。 
6. shift() 

用 法 : arrayObject.shift(). 
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作用 : 删除 并 返回 数组 的 第 一 个 元 素 。 

7. Slice() 

用 法 : arrayObject.slice(start,end). 

start 为 必 选 参数 ，end 为 可 选 参数 。 

作用 : 返回 一 个 新 的 数组 ， 包 含 从 start 到 end 的 arrayObject 中 的 所 有 元 素 。 

8. sort() 

用 法 : arrayObject.sort(). 

VER]: 对 数组 元 素 排序 。 

9. splice() 

用 法 : arrayObject.splice(index,howmany,elementl,....., elementN). 

参数 index 为 必 选 参数 ， 用 于 指定 添加 /删除 元 系 的 位 置 ; 参数 howmany 也 是 必 选 参 
数 ， 用 于 指定 删除 多 少 个 元 素 ， 其 他 参数 为 可 选 参数 ， 参 数 elementl 为 要 添加 到 数组 中 的 新 
元 素 。 从 index 所 指 的 位 置 处 开始 搬入。 参数 elementN 为 问 数组 添加 的 第 N 个 元 素 。 

作用 :为 数组 删除 并 深 加 新 元 系 。 

10. toString() 

用 法 : arrayObject.toString(). 

TERI: 将 数组 转换 为 字符 串 ， 并 返回 结 末 。 

11. unshift() 

用 法 : arrayObject.unshift(newelementl ,jnewelementQ,....,newelementN). 


作用 ; 为 数组 的 开头 添加 一 个 或 多 个 元 素 ， 并 返回 新 的 长 度 。 


20.9.8 ”数学 内 置 对 保 方 法 
1. abs(x) 
用 法 : Math.abs(x). 
作用 : 返回 数 的 绝对 值 。 
举例 说 明 : 











«script type="text/Javascript"> 
document.write(Math.abs(-7.25)) 
</script> 


2. acos(x) 

用 法 : Math.acos(x). 
作用 : 返回 数 的 反 余弦 值 。 
3. asin(x) 

用 法 : Math.asin(x). 
作用 : 返回 数 的 反正 弦 值 。 
4. atan(x) 

用 法 : Math.atan(x). 
作用 : 返回 数 的 反正 切 值 。 
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5. atan2(y,x) 

用 法 : Math.atan2(y,x)。 

作用 : 计算 两 个 变量 的 反正 切 值 。 
6. ceil(x) 

用 法 : Math.ceil(x). 

作用 : 返回 大 于 或 等 于 一 个 数 的 最 小 整数 。 
7. cos(x) 

用 法 : Math.cos(x). 
VERI: 返回 数 的 余弦 值 。 
8. exp(x) 

用 法 : Math.exp(x)« 
TERI: Rel e. 

9. floor(x) 

用 法 : Math.floor(x). 
作用 : 返回 小 于 或 等 于 一 个 数 的 最 大 整数 。 
10. log(x) 

用 法 : Math.log(x)。 

TERI: 返回 数 的 目 然 对 数 〈 撒 为 e)。 
11. max(Xy...) 

用 法 : Math.max(x...). 

作用 : 返回 参数 中 的 最 大 值 。 

12. min(X,y) 

用 法 : Math.min(x...). 

VERI: 返回 参数 中 的 最 小 值 。 

13. pow(x,y) 

用 法 : Math.pow(x,y). 

VERI: 返回 x 的 y OR. 

14. random( ) 

用 法 : Math.random(). 

VER]: 返回 0 至 1 的 随机 数 。 

15. round(x) 

用 法 : Math.round(x). 

作用 : 对 数 进 行 四 舍 五 入 后 取 整 。 
16. sin(x) 

用 法 : Math.sin(x)。 

VERI: 返回 数 的 正弦 值 。 

17. sqrt(x) 

用 法 : Math.sqrt(x)。 

作用 : 返回 数 的 平方 根 。 
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18. tan(x) 

用 法 : Math.tan(x). 

作用 : 返回 数 的 正切 值 。 

19. valueOf(x) 

用 法 : mathObject.valueOfQ. 

EH: 返回 一 个 Math 对 象 的 原始 值 。 


20.9.5 ”日 期 内 置 对 象 方法 


1. Date() 
用 法 : Date(). 
作用 : 返回 当天 的 日 期 。 





«script type-"text/javascript" 
document.write(Date()) 
</script> 


2. getDate() 

用 法 : dateObject.getDate(). 

WH: 返回 当月 中 的 第 儿 天 ， 返 回 值 为 1 一 31， 且 该 方法 需要 与 Date 对 象 配合 使 用 。 
举例 说 明 : 








«script type-"text/javascript" 
var date = new Date() 
document.write(date.getDate()) 

</script> 


输出 结果 : 8 

3. getDay() 

用 法 : dateObject.getDay(). 

作用 : 返回 一 周 中 的 第 几 天 ， 返 回 值 为 0 一 6， 该 方法 需要 与 Date 对 象 配合 使 用 。 
4. getMonth() 

用 法 : dateObject.getMonth(). 

作用 : 返回 当前 的 月 份 ， 返 回 值 为 0~11， 且 该 方法 需要 与 Date 对 象 配合 使 用 。 
5. getFullYear() 

用 法 : dateObject.getFullYear(). 

作用 : 返回 一 个 表示 年 份 的 四 位 数字 。 

举例 说 明 : 

















«script type-"text/javascript" 
var date = new Date() 
document.write(date.getFull Year()) 
</script> 
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6. getYear() 

用 法 : dateObject.getYear(). 

VERI: 返回 表示 年 份 的 两 位 或 四 位 数字 。 
举例 说 明 : 


«script type="text/Javascript"> 
var date = new Date() 
document. write(date.getYear()) 

</script> 


从 其 体 日 期 中 提取 年 份 : 





«script type="text/javascript"> 
var open = new Date("August 8, 2008 20:00:00") // 预 置 一 个 具体 时 间 
document.write("Olympics inaugurate" + open.getYear()) // 提 取 时 间 
</script> 


7. getHours() 

用 法 : dateObject.getHours()。 

作用 : 返回 日 期 对 象 的 小 时 数 ， 返 回 值 是 0 午夜 零点 ) —23 (晚上 11 点 ) 之 间 的 
一 个 整数 。 

8. getMinutes() 

用 法 : dateObject.getMinutes(). 

作用 : 返回 日 期 对 象 的 分 钟 数 ， 返 回 值 是 0 一 59 之 间 的 一 个 整数 。 

9. getSeconds() 

用 法 : dateObject.getSeconds(). 

作用 : 返回 日 期 对 象 的 秒 数 ， 返 回 值 是 0 一 59 之 间 的 一 个 整数 。 

10. getMilliseconds() 

用 法 : dateObject.getMilliseconds(). 

作用 : 返回 日 期 对 象 的 坚 秒 数 ， 返 回 值 是 0 一 999 之 间 的 一 个 整数 。 

11. getTime() 

用 法 : dateObject.getTime(). 

作用 : 返回 目 1970 年 1 月 1 日 午夜 零点 到 现在 的 县 秒 数 。 

12. getTimezoneOffset() 

用 法 : dateObject.getTimezoneOffset() . 

作用 : 返回 本 地 时 间 和 格林 尼 治 时 间 之 间 的 时 差 ， 以 分 钟 为 里 位 。 

13. getUTCDate() 

用 法 : dateObject.getUTCDate(). 

作用 : 根据 国际 时 间 确 定 返 回 Date 对 象 是 月 中 的 第 几 天 ， 返 回 值 为 1 一 31。 

14. getUTCDay() 

用 法 : dateObject.getUTCDay(). 

作用 : 根据 国际 时 间 返 回 Date 对 象 的 星期 数 ， 返 回 值 为 0 一 6。 
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15. getUTCMonth() 

用 法 : dateObject.getUTCMonth(). 

作用 : 根据 国际 时 间 返 回 Date 对 象 的 现在 月 份 ， 返 回 人 为 0 一 11。 
16. getUTCFullYear() 

用 法 : dateObject.getUTCFullYear()。 

作用 : 根据 国际 时 间 返 回 Date 对 象 的 完整 四 位 数 年 份 。 

17. getUTCHours() 

用 法 : dateObject.getUTCHours(). 

作用 : 根据 国际 时 间 返 回 Date 对 象 的 小 时 ， 返 回 值 为 0 一 23。 
18. getUTOMinutes() 

用 法 : dateObject.getUTCMinutes(). 

作用 : 根据 国际 时 间 返 回 Date 对 象 的 分 钟 ， 返 回 值 为 0 一 59。 
19. getUTCSeconds() 

用 法 : dateObject.getUTCSeconds(). 

作用 : 根据 国际 时 间 返 回 Date 对 象 的 秒 数 ， 返 回 值 为 0 一 59。 
20. getUTCMilliseconds() 

用 法 : dateObject.getUTCMilliseconds()。 

VERI: 根据 国际 时 间 返 回 Date 对 象 的 宣 秒 数 ， 返 回 值 为 0 一 999。 
21. parse() 

用 法 : Date.parse(datestring) 

VERI: 返回 目 1970 年 1 月 1 日 午夜 零点 全 指定 日 期 的 坚 秒 数 。 
举例 说 明 : 








«script type-"text/javascript" 
var ms — Date.parse(" August 8, 2008 20:00:00") 
document.write(ms) 


</script> 


22. setDate() 

用 法 : dateObject.setDate(day)。 

参数 day 的 取 值 必须 为 1 一 31 之 间 的 整数 。 
WH: WE Date 对 象 的 某 一 日 。 
举例 说 明 : 


«script type="text/Javascript"> 
var day = new Date() 
day.setDate(8) 
document.write(day) 

</script> 


23. setMonth() 
用 法 : dateObject.setMonth(month,day) 
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month HSG MEA 0 一 11 之 间 的 整数 ，day 为 可 选 参 数 ， 取 值 为 1 一 31 之 间 的 
整数 。 

作用 : wA Date 对 象 的 月 份 。 

举例 说 明 : 


«script type-"text/javascript" 
var day-new Date() 
day.setMonth(4,8) 
document.write(day) 

</script> 


24. setFullYear() 

用 法 : dateObject.setFullYear(year,month,day). 

year 为 必 选 参数 ， 取 值 为 四 位 整数 ，month 为 可 选 参数 ， 取 值 为 0 一 11 之 间 的 整数 ，day 
为 可 选 参数 ， 取 值 为 1 一 31 之 间 的 整数 。 

作用 : 设置 Date 对 象 的 年 份 。 

25. setYear() 

用 法 : dateObject.setYear(year). 

VER]: 设置 Date 对 象 的 年 份 。 

26. setHours() 

用 法 : dateObject.setHours(hour,min,sec,millisec). 

hour 为 必 选 参数 ， 有 其 他 参数 为 可 选 参数 。 

VER]: 设置 Date 对 象 的 小 时 数 。 

27. setMinutes() 

用 法 : dateObject.setMinutes(min,sec,millisec)。 

min 为 必 选 参数 ， 其 他 参数 为 可 选 参数 。 

VER]: 设置 Date 对 象 的 分 钟 数 。 

28. setSeconds() 

用 法 : dateObject.setSeconds(sec,millisec). 

sec 为 必 选 参数 ，milisec 为 可 选 参数 。 

作用 : 设置 Date 对 象 的 秒 数 。 

29. setMilliseconds() 

用 法 : dateObject.setMilliseconds(millisec). 

EH: 设置 Date 对 象 的 毫秒 数 。 

30. setlime() 

用 法 : dateObject.setTime(millisec). 

作用 : 要 设置 的 日 期 和 时 间 据 GMT 时 间 1970 年 1 月 1 HFA EWEA 

31. setUTCDate() 

用 法 : dateObject.setUTCDate(day). 

VER]: 根据 国际 日 设 定 某 一 天 。 
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32. setUTCMonth() 

用 法 : dateObject.setUTCMonth(month,day). 

VER]: 根据 国际 日 设置 Date 对 象 的 月 份 。 

33. setUTCFullYear() 

用 法 : dateObject.setUTCFullYear(year,month,day). 

year 为 必 选 参数 ，month 为 可 选 参数 ， 取 从 为 0 一 11 之 间 的 整数 ，day 为 可 选 参数 ， 取 
值 为 1 一 31 之 间 的 整数 。 

VER]: 根据 国际 日 设 鞋 Date 对 象 的 年 份 。 

34. setUTCHours() 

用 法 : dateObject.setUTCHours(hour,min,sec,millisec). 

参数 hour 为 必 选 ， 取 信 为 0 一 23 之 间 的 整数 ，min 为 可 选 参数 ， 取 信 为 0 一 59 之 间 的 整 
数 ; sec 为 可 选 参 数 ， 取 信 为 0 一 59 之 间 的 整数 ，milisec 为 可 选 参数 ， 取 人 为 0 一 999 之 间 的 
整数 。 

VER]: 根据 国际 日 设 鞋 Date 对 象 的 小 时 。 

35. setUTCMinutes() 

用 法 : dateObject.setUTCMinutes(min,sec,millisec). 

参数 min 为 必 选 参数 ， 其 他 为 可 选 参数 。 

VER]: 根据 国际 日 设置 Date 对 象 的 分 钟 。 

36. setUTCSeconds() 

用 法 : dateObject.setUTCSeconds(sec,millisec). 

VERI: 根据 国际 日 来 设置 Date 对 和 象 的 秒 数 。 

37. setUTCMilliseconds() 

用 法 : dateObject.setUTCMilliseconds(millisec)。 

WEH: 根据 国际 日 设置 Date XI Ze pr 

38. toString() 

用 法 : dateObject.toString()。 

作用 : 将 Date 对 象 转换 为 字符 串 。 

39. toGMTString() 

用 法 : dateObject.toGMTString(). 

作用 : 根据 格林 尼 治 时 间 把 Date 对 象 转换 为 字符 串 ， 并 返回 结 

40. toUTCString() 

用 法 : dateObject.toUTCString()。 

作用 : 根据 国际 时 间 把 Date 对 象 转换 为 字符 串 ， 并 返回 结 

41. toLocaleString() 

用 法 : dateObject.toLocaleString(). 

作用 : 根据 本 地 时 间 把 Date 对 象 转换 为 字符 串 。 并 返回 结 

42. UTC() 

用 法 : Date.UTC(year,month,day,hours,minutes,seconds,ms). 

作用 : 根据 国际 时 间 计 算 从 1970 年 1 月 1 日 午夜 至 今 所 经 过 的 时 间 ， 以 毫秒 为 单位 。 












































HTML5, CSS3, JavaScript 开发 手册 


43. valueOf() 
用 法 : dateObject.valueOf(). 
VERI: 返回 日 期 对 象 的 原始 值 。 


| 20.10 dus 





通 党 情况 下 ， 用 户 通 过 “提交 信息 ”按钮 提交 表单 ， 收 集 的 信息 被 发 送 到 Web 服务 器 
Eo JavaScript 可 用 来 在 数据 被 送 往 服 务 喜 前 对 HTML 表单 中 的 输入 数据 进行 验证 。 验 证 表 


单 中 的 数据 主要 包括 ; 
(1) AGES. 
(25 表单 的 输入 日 期 是 否 合 法 。 
(3) 密码 表单 与 确认 密码 表单 是 否 一 致 。 
(4) 用 户 名 和 密码 表单 与 数据 库 注 册 密 码 表单 是 否 一 致 。 
(5) Email 表单 的 输入 是 合 合 法 。 
下 和 面 淮 一 个 实例 来 说 明 表 单 校 验 的 一 般 方 法 ， 表 音效 果 如 图 20-9 Pr. 


zl 





























D 序 代码 /20/20-22.html sy 三 











| 提交 信息 | | 重 置 信息 | 





图 20-9 用 户 注 册 表 单 


代码 清单 20-22: 一 个 JavaScript 校 验 实 例 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>JavaScript 校 验 </title> 

«script type="text/javascript"> 

function on submit(thisform) ( 
with(thisform) 1 
<!-- 验 证 用 户 名 的 合法 性 --> 


一 一 0 








if(userName.value |userName.value--null) 1 
alert(" 用 户 名 不 能 为 空 ， 请 输入 用 户 名 ! "); 
return false; 

velse 


<!-- 验 证 密码 的 合法 性 -> 
if(userPass Word.value==""||luserPass Word.value==null){ 
alert(" 密 但 不 能 为 衬 ， 请 输入 密码 ! "); 
return false; 
else 


<!-- 验 证 确认 密码 的 合法 性 -> 
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if(resetPassWord.value--""|resetPassWord.value--null) 1 
alert(" 确 认 密 但 栏 不 能 为 空 ， 请 确认 蜜 但 ! ") 
return false; 
velse 
<!-- 验 证 密码 与 确认 密码 的 一 致 性 --> 
if(userPassWord.value!-resetPassWord.value )1 
alert(" 2513 5j Bf at R3 — $41 "); 


return false; 








velse 
<!-- 验 证 Email 的 合法 性 --> 
if(email.value--""|leemail.value—-null ){ 
aler("Email 栏 信息 不 能 为 室 ， 请 填写 其 中 信息 ! 9) 
return false; 


yelse { <!-- 验 证 Email 书写 的 合法 性 --> 
for(1=0;i<email.value.length;i++) 
<!-- 验 证 书写 的 Email 是 否 含 有 "@" 标 识 --> 
if(email.value.charAt(1)=="(@") 
break; 
1f(1== email.value.length) | 
alert(" 请 输入 合法 的 Email HEHE"); 
return false; } 
j 
j 
j 
</script> 
</head> 
<body> 
<form method="POST" action-"result.html" name="myform" onsubmit="return on submit(this)" 
<!-- 设 置 用 户 名 表单 --> 
用 &nbsp; 户 &nbsp; 名 : 
«input type="text" name-"userName'" size="30"><br> 
<!-- 设 置 密码 表单 --> 
2 &nbsp;&nbsp;&nbsp;&nbsp;fi3: 
«input type="password" name-"userPassWord" size="30"><br> 
«1-- CELA HR RC TR. 
WA REA: 
<input type="password" name="resetPassWord" size="30"><br> 
<!-- 设置 电子 邮箱 表单 --> 
电子 邮箱 : 
«input type="text" name-"email" size="30"> <br><br> 
<!-- 设 置 提交 按钮 --> 
«input type="submit" value=" jE fri bd 
<!-- 设 置 重 普 按 钮 --> 
«input type-"reset" value=" 重 置信 息 "> 
</form> 
</body> 
</html> 
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代码 分 析 : 

this. 关键 字 是 对 当前 对 象 的 引用 ， 在 本 例 中 是 对 当前 表单 的 内 容 的 引用 。 通 过 
on_Submit(this) 将 当前 表单 内 容 传递 给 形 参 thisform。 

with 关键 子 使 用 的 一 般 格式 是 :with (< 对 象 >) < 语句 >; 

with 语句 通常 用 来 节省 特定 情形 下 必须 写 的 代码 量 。 例 如 : 











document.write(Math.cos(35)) 
document.write(Math.sin(80)) 
document.write(Math.tan(35)) 


with 可 以 写成 如 下 代码 样式 ， 这 样 束 省 略 了 每 一 条 语句 中 的 Math〈 在 本 实例 中 实际 上 
省 略 了 myform 对 象 ) 。 





with(Math){ 
document.write(cos(35)) 
document.write(sin(80)) 
document.write(tan(35)) 


} 
在 on_submit(thisform) 函 数 中 可 通过 如 下 方法 判断 用 户 名 的 输入 合法 性 : 





——'" 


if(userName.value l|userName.value--null) { 
alert(" 用 户 名 不 能 为 空 ， 请 输入 用 户 名 ! "); 
return false; 


j 


因为 前 面 使 用 了 with, xx Hun] AEH userName.value 来 获取 表单 中 的 内 容 并 判断 其 输 
入 的 合法 性 。 当 表单 内 容 为 军 时 ， 单 击 “ 提 交 ” 按 钮 将 弹出 如 图 20-10 所 示 的 警告 对 话 框 。 


Windows Internet Explorer fx] 














N 用 户 名 不 能 为 空 ， 请 输入 用 户 名 4 





图 20-10 警告 对 话 框 
其 他 表单 的 验证 与 之 类 似 ， 所 有 的 验证 都 通过 后 ， 单 击 “ 提 交 ” 按 钮 ， 网 页 会 自动 弹出 


result.aspx 页 。 弹 出 result.html 页 是 通过 <form method="POST" action-"result.aspx" name= 





"myform" onsubmit-"return on submit(this)"> 中 的 action 设 定 的 。 


| 20.11 Cookie 脚本 


cookie Æ FM T e) mN Ass TR S nIEAWGKHIPC BHL d. AAA LETS RA 
HEISE. D. SHF ARV MUSS ESSA HB DUE CHUSITIZETEHEMIXEoK TG 
坛 中 使 用 )， 和 需要 填写 用 户 名 和 和 密码， 用 户 名 和 密码 将 存储 在 客户 端的 cookie 中 。 当 再 次 访 
问 该 网 页 时 ， 用 户 名 和 密码 会 从 cookie 中 取出 ， 这 样 可 以 提高 效率 ， 给 用 户 融 来 方便 。 但 
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是 ， 这 就 对 系统 的 安全 性 所 出 了 较 融 的 要 求 。cookie 中 的 内 容 大 多 数 经 过 了 加 密 处 理 ， 因 此 
- 般 用 户 看 到 的 只 是 一 些 室 无 意义 的 字母 数字 组 合 ， 只 有 服务 器 的 处 理 程 序 才 知道 它们 真正 
Per X. 


20.11.1 Cookie 的 属性 


cookie 是 Document 对 象 的 属性 ， 可 以 对 网 页 的 cookie 进行 创建 操作 、 读 取 操 作 、 修 改 
操作 以 及 删除 操作 。cookie 包含 了 4 个 可 选 属性 : expires. path. domain 和 secure， 分 别 控 
制 它 的 生存 周期 、 可 见 性 和 安全 性 。 

expires 用 于 指定 cookie 的 生存 周期 ， 默 认 情 况 下 ，cookie 是 暂 存 的 ， 也 就 是 说 当 关 闭 浏 
览 髓 后 信息 值 将 消失 ， 可 以 使 用 expires 指定 cookie 的 终止 信息 的 时 间 ， 一 旦 超过 了 这 个 终 
止 时 间 ，cookie 会 把 存储 在 cookie 中 的 信息 删除 。 

path 用 于 指定 与 cookie 关联 在 一 起 的 网 页 ， 取 值 可 以 是 一 个 目录 或 路 径 。 默 认 情 况 下 ， 
cookie 和 创建 它 的 网 页 存储 在 同一 目录 下 ， 此 外 ， 还 和 处 于 该 目 杂 的 下 一 级 子 目 杂 的 网 页 关 
联 ， 例 如 http://www.sina.com/sum/index.html 建立 了 一 个 cookie, JA http://www.sina. 
comy/sum/ 目 录 下 的 所 有 网页， 以 及 目录 下 的 任何 子 目 录 的 网 页 都 可 以 访问 这 个 cookies m 
http://www.sina.com/total/ 则 不 能 访问 http://www.sina.com/sum/index.html 建立 的 cookie。 如 果 
想 访 问 这 个 网 页 ， 则 需 通 过 cookie 的 path 属性 设置 ， 使 path=“ ”， 这 样 该 URL 的 所 有 网 页 
都 可 以 共享 这 个 cookie。 如 果 http://www.sina.com/total/str.html 想 访 问 cookie, WHE path 设置 
为 path—"/total ". 

domain 用 于 指定 有 效 域名 ， 例 如 catalog.sina.com 创建 了 一 个 cookie, 使 path=“/ ", 3f 
使 domain=“.sina.com”， 那 么 所 有 位 于 catalog.sina.com 的 网 页 和 所 有 位 于 strsina.com 的 网 页 
以 及 位 于 sina.com 域 的 服务 器 上 的 网 页 均 能 访问 这 个 cookie. 

secure 指定 了 cookie 的 值 如 何在 用 户 和 服务 器 间 传 递 。 默 认 情 况 下 ，cookie 是 不 安全 
的 ， 它 通过 不 安全 的 HTTP 传递 数据 。 如 果 将 cookie 标记 为 安全 ， 那 么 它 与 服务 右 间 就 可 以 
通过 HTTP 协议 安全 传递 数据 。 


20.11.2 Cookie 的 存储 、 读 取 和 删除 
cookie 是 Document 对 象 的 属性 ， 具 有 字符 串 属 性 。cookie 存储 的 基本 格式 如 下 : 
















































































document.cookie =value 


例如 ， 可 以 创建 一 个 存储 访问 者 名 学 的 cookie。 当 访问 者 首次 访问 网 站 时 ， 会 被 要 求 填 
写 姓 名 ， 姓 名 会 存储 于 cookie 中 。 当 访问 者 再 次 访问 网 站 时 ， 束 会 收 到 “信息 已 经 和 存储， 是 
THER" WEE. 


首先 ， 创 建 一 个 可 在 cookie 变量 中 存储 访问 者 姓名 的 函数 。 





























function setCookie(c name,value,explredays){ 
var exdate-new Date() 
exdate.setDate(exdate.getDate()--expiredays) 
document.cookie-c name- "=" cescape(value)- 
((expiredays--null) ? "" : ';expires-"exdate.toGMTString()) 
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j 


上 面 这 个 函数 中 的 参数 存 有 cookie 的 名 称 、 值 以 及 过 期 天 数 。JavaScript 的 escapeOrR 2A 
是 一 种 加 密 的 方法 ， 能 够 把 某 些 符号 、 汉 字 等 编 成 乱码 ， 解 密 这 种 代 但 可 采用 其 反 函 数 ， 即 
通过 unescape O PA Ze Je Js VR 

这 样 创建 的 cookie 只 能 在 网 页 会 话 时 有 效 ， 一旦 退出 网 页 ， 信 息 束 会 丢失 。 可 以 通过 
expires 设置 一 个 终止 时 间 来 存储 cookie。 

首先 将 天 数 转 换 为 有 效 的 日 期 ， 然 后 ， 我 们 将 cookie 名 称 、 值 及 其 过 期 日 期 存 入 
document.cookie XZ- 

之 后 ， 要 创建 为 一 个 函数 来 读 取 已 设置 的 cookie: 











function getCookie(c name)t{ 
if (document.cookie.length-^0) | 

c start-document.cookie.indexOf(c name + "=") 

if (c start!—-1)1 
c start-c start - c name.length+1l 
c end-document.cookie.indexOf(";",c start) 
if(c end——-1) c end-document.cookie.length 
return unescape(document.cookie.substring(c start,c end)) 


j 
j 


return 


j 
上 面 的 函数 首先 会 检查 document.cookie 对 象 中 是 否 存 有 cookie. [Ell document.cookie 
对 象 中 存 有 茶 些 cookie， 那 么 会 继续 检查 指定 的 cookie 是 否 已 储存 。 如 采 找 到 了 想 要 的 
cookie, Wok, AUBRE EFIE 
最 后 ， 要 创建 一 个 删除 cookie 的 函数 ，cookie 的 删除 实际 就 是 通过 设置 cookie 的 生命 
周期 实现 的 。 


n" 

















function delCookie(c name,value) 1 
var exdate — new Date() 
exdate.setTime(exdate.getTime() - 1) 
document.cookie-c name- "=" cescape(value)-*";expires-"*-exdate.toGMTsString() 


代码 清单 20-23: Cookie 使 用 实例 的 完整 代码 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>Cookie 使 用 </title> 

«script type="text/Javascript"> 
// 获 取 Cookie 
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function getCookie(c name)| 
/判断 是 否 存 有 cookie 
if (document.cookie.length^0) ( 
c start-document.cookie.indexOf(c name + "=") 
if (c start!—-1)1 
c start-c start + c name.length+1l 
c end-document.cookie.indexOf(";",c start) 
if(c end——-1) c end-document.cookie.length 
return unescape(document.cookie.substring(c start,c end)) 


j 


return 


j 
/删除 cookie 
function delCookie(c name,value) 1 


n" 


var exdate — new Date() 
exdate.setTime(exdate.getTime() - 1) 
document.cookie-c name- "=" +escape(value)+";expires="+exdate.toGMTString() 
checkCookie() 
j 
/存储 cookie 
function setCookie(c name,value,expiredays) | 
var exdate-new Date() 
exdate.setDate(exdate.getDate()--expiredays) 
document.cookie-c name- "=" cescape(value)- 
((expiredays--null) ? "" : 'expires-"-exdate.toGMTString()) 
checkCookie() 
j 
function checkCookie() | 
username-getCookie('username") 
if (username!-null && username!-"") { 
var inf-confirm(username-", XOU! 是 否 清除 Cookie?") 
if (1inf-—true) 
delCookie("username",username) 
}else{ document.write(" 你 单 击 了 取消 按钮 !1")} 
} else { 
username=prompt(' 请 输入 您 的 名 学 :',") 
if (username!=null && username!="") { setCookie('username',username,365) } 





j 

</script> 

</head> 

«body onLoad="'checkCookie()"> 
</body> 

</html> 


第 20 党 
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第 21 意 HTML5 与 CSS3 范例 


21.1 垃圾 收集 箱 


本 市 通过 Drag/Drop 实现 一 个 如 图 21-1 所 示 的 垃圾 收集 箱 效 果 。 图 的 左 侧 是 一 个 “ 垃 
圾 ”列表 ， 设 置 了 三 个 垃圾 : 香 此 皮 、 旧 报纸 、 一 次 性 饭盒 ， 右 侧 是 一 个 “垃圾 收集 箱 ” 
可 以 通过 鼠标 将 垃圾 拖 放 到 垃圾 收集 箱 中 ， 效 末 如 网 21-2 所 示 。 





D sgh 


3 € > Q | 口 Ss38Javascript 开 发 手册 /程序 代码 /21/21-1.html| sr| 三 





图 21-1 垃圾 箱 效 果 图 21-2 放 入 垃圾 后 效果 


垃圾 收集 箱 功能 大 致 可 以 分 为 以 下 几 个 步骤 。 

1. 创建 拖 放 对 象 

图 21-1 中 指定 了 三 个 拖 放 对 象 ， 分 别 是 香蕉 皮 、 旧 报纸 、 一 次 性 饭盒 。 要 想 让 对 象 能 
够 被 拖 动 ， 只 要 设置 对 象 的 draggable 属性 为 tue。draggable 属性 具有 三 个 值 ， 分 别 是 : true 
表示 对 象 能 够 被 拖 动 ，false 表示 对 象 不 能 够 被 拖 动 ，auto 表示 视 浏览 器 而 定 。 





«div style-"float:left;"— 
<div><img id-"box1" src-"images/bana.png" draggable-"true"; ondragstart-" dragStart(event) ——/div^ 
<div><img id-"box2" src-"images/pap.png" draggable-"true"; ondragstart-" dragStart(event)' ></div> 
<div><img id="box3" src-"images/box.png" draggable-"true"; ondragstart="dragStart(event)" ></div> 
</div> 


2. 创建 目标 对 象 


目标 对 象 也 惑 是 盛 放下 圾 的 起 圾 箱 ， 在 目标 对 象 上 设置 了 三 个 触发 事件 。 当 被 拖 动 的 对 
象 进入 目标 对 象 时 ， 完 成 拖 放 操 作 过 程 ， 此 时 将 触发 这 些 事 件 。 








«div style-"float:right;" 
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«div 1d="dropArea" dondragenter-"dragEnter(event)" ondrop-"dragDrop(event)" 
ondragover-"dragOver(event)" > 
<p><h2 align="center" JJ 48 «/h2»«/p» 
</div> 
</div> 


3. 拖 动 对 象 

当 一 个 对 象 被 拖 动 的 时 候 ， 开 始 触 发 ondragstart 事件 ， 在 ondragstart 事件 处 理 中 使 用 
setData0) 方 法 指定 哪个 数据 被 拖 动 ，dataTransfersetData0) 方 法 设置 了 数据 类 型 和 被 拖 动 的 
数据 。 


function dragStart(ev) { 
ev.dataTransfer.effectAllowed-'move'; 
ev.dataTransfer.setData(" Text", ev.target.getAttribute('1id")); 
ev.dataTransfer.setDragImage(ev.target,0,0); 


j 


4. 放置 对 象 

为 了 允许 drop， 可 调用 preventDefault0 方 法 来 阻止 浏览 器 的 默认 数据 处 理 方式 。 默 认 的 
情况 下 ， 拖 放 的 目标 是 不 允许 接收 元 素 的 ， 为 了 把 拖 动 的 元 素 放 置 其 中 ， 束 必须 把 默认 处 理 
HA l 











function dragOver(ev) { ev.preventDefault(); } 
5. 执行 放置 
当 可 拖 动 的 数据 被 放置 的 时 候 ， 会 触发 drop 事件 。 目 标 元 素 接 收 到 被 拖 放 的 元 素 后 ， 
执行 getData0) 方 法 从 dataTransfer 中 获取 数据 。getData0 方 法 中 的 数据 类 型 与 setData0 方 法 中 
的 数据 类 型 相同 。 











function dragDrop(ev) { 
var src = ev.dataTransfer.getData(" Text"); 
ev.target.appendChild(document.getElementBylId(src)); 
ev.preventDefault(); 


j 
下 面 给 出 垃圾 收集 箱 的 完整 实现 代码 。 


代码 清单 21-1: 垃圾 收集 箱 的 实现 
«IDOCTYPE HTML» 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 垃 圾 箱 </title> 
«style type="text/css"> 
body { background-color: #CCC; } 
#content 1 
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width: 260px; 
height: 260px; 
padding: 10px 20px 10px 20px; 
margin: 0px auto; 
background-color: #FFF; 
border: none 5px #000000; 
j 
ZdropArea 1 
color: ZCCC; 
padding: 5px; 
margin-top: 10px; 
border: dotted 2px #FF0000; 
j 
</style> 
«script type="text/Javascript"> 
function dragStart(ev) { 
ev.dataTransfer.effectAllowed-'move'; 
ev.dataTransfer.setData(" Text", ev.target.getAttribute('1id")); 
ev.dataTransfer.setDragImage(ev.target,0,0); 
j 
function dragEnter(ev) { ev.preventDefault(); } 
function dragOver(ev) { ev.preventDefault(); ! 
function dragDrop(ev) 1 
var src — ev.dataTransfer.getData(" Text"); 
ev.target.appendChild(document.getElementBylId(src)); 
ev.preventDefault(); 
j 
</script> 
</head> 
<body> 
<div id="content"> 
<div style="float: left;"> 
<div><img id="box1" src="images/bana.png" draggable-"true"; ondragstart="dragStart(event)" ></div> 
<div><img id="box2" Src= images/pap.png" draggable="true"; ondragstart="dragStart(event)"></div> 
<div><img 1d="box3" src="images/box.png" draggable="true"; ondragstart="dragStart(event)"></div> 
</div> 
<div style=" float:right;"> 
<div id="dropArea" dondragenter="dragEnter(event)" 
ondrop="dragDrop(event)" 
ondragover="dragOver(event)"> 
<p><h2 align="center"> HIK 48 </h2><br></p> 
</div> 
</div> 
</div> 
</body> 
</html> 
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下 面 是 一 个 拖 放 上 传 图 万 的 实例 ， 用 户 可 以 通过 拖 放 的 方式 ， 将 本 地 文件 夹 中 的 图 卢 拖 
放 到 页 面 上 来 。 这 种 拖 放 的 方式 比 传统 的 上 传 方式 更 人 简洁、 灵活 、 方 便 。 

图 21-3 是 一 个 演示 拖 放 后 的 效 来 。 左 侧 为 拖 放 区 用户 将 图 片 拖 放 到 该 区 域 )， 石 侧 为 
图 片 展示 列表 用 于 展示 用 尸 拖 放 的 所 有 图 片 )。 





























[3 HTMLS Ae | HT = 
E - Q [)fie///DABFE/HTMLS&CSS3&lavaScriptHEAEBB/EEHRECE/21/21-2.,html $7 = 
Er FREE I: Enim: 


+ Fenguims. jpg 771335 bytes 


图 21-3” 拖 放 效 果 
拖 放 上 传 功能 大 致 可 以 分 解 为 以 下 几 个 步骤 。 


1. 创建 拖 放 与 展示 区 域 
首先 设置 两 个 区 域 ， 一 个 区 域 用 于 接收 用 户 拖 放 的 图 片 文件 ， 妃 一 个 区 域 用 于 展示 所 有 
用 户 拖 放 的 图 卢 文 件 列 琢 。 代 但 如 下 : 











<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 拖 放 上 传 图 片 </title> 
<link href="css/21-2.css" rel="stylesheet" type="text/css"> 
«script src-"js/21-2.js" type="text/javascript" ></script> 
</head> 
<body> 
<div> 
<p> 图 卢 拖 放 区 域 : </p> 
«div id="images area" class-"images area"> </div> 
«div id -"images list" 
<p> 图 片 文 件 列表 : </p> 
«ul 1d="list"> </ul> 
</div> 
</div> 
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</body> 
</html> 


2. 添加 事件 监听 
H ZH Va XCREPEXETI TI. AA 5Lasx d FileReader 时 ， 监 听 拖 放 操 作 。 在 拖 放 过 
程 中 将 触及 dragover. drop. dropenter. dropleave 事件 。 代 人 码 如 下 : 





function init() { 
if (window.FileReader) { 
var area = document.getElementById('images area"); 
area.addEventListener('dragenter', handleDragEnter, false); 
area.addEventListener('dragover', handleDragOver, false); 
area.addEventListener('drop', handleFileSelect, false); 
area.addEventListener('dragleave', handleDragLeave, false); 
}elsef alert(" HFK K IP] | Wai AN S E M11 "); } 
j 


window.onload = function() { init(); } 
3. 拖 放 事件 
下 面 这 部 分 代码 为 整个 拖 放 过 程 的 核心 代码 。 直 接 读 取 拖 放 的 图 片 文件 ， 并 在 图 像 文件 
列表 中 显示 图 像 预 宽 图 。 代 人 码 如 下 : 


/ TUBAE C 2 Ed T 
function isImage(type) 1 

















switch (type) { 
case "image/jpeg": 
case 'image/png": 
case 'image/gif': 
case image/bmp*": 
case 'image/]pg": 
return true; 
default: 


return false; 


j 
/处 理 拖 放 文 件 列表 
function handleFileSelect(event) { 
event.stopPropagation(); 
event.preventDefault(); 
var files = event.dataTransfer.files; 
var file; 
for (var 1 = 0;file = files[1]; i++) 1 
var file type = file.type, 
reader = new FileReader(), 
looks = function (file, img) { 
document.getElementById( list).innerHTML += '<li><strong>' + file.name + '</strong>- ' + 
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file.size + "bytes<p>' + img + '</p></l1>'; 
document.getElementById('images area').innerHTML = img; }, 
isImg = isImage(file type), 
img; 
/ 处 理 得 到 的 图 片 
if (isImg) { 
reader.onload = (function (theFile) { 
return function (e) { 
img = '<img class="preview" src=" + e.target.result + " title=" + theFile.name + "/>'; 
looks(theFile, img); }; 
; (file) 
reader.readAsDataURL (file); 
! else 1 
img='Sorry， 你 上 传 的 不 是 图 厂 !! s 
looks(file, img); 
} 
} 
} 
/ 图 厂 被 拖 入 指定 区 域 后 ， 设 秆 该 区 域 的 边框 样式 效果 
function handleDragEnter(event){ this.setAttribute('style', 'border-style:dashed;); } 
/ 图 厂 被 拖 出 指定 区 域 后 ， 设 秆 该 区 域 的 边框 样式 效果 
function handleDragLeave(event){ this.setAttribute('style', "); } 
/ 防止 浏览 右 默 认 事件 市 来 的 重 定 问 
function handleDragOver(event) { 





event.stopPropagation(); 
event.preventDefault(); 


| 213 监控 文件 读 取 进度 


使 用 并 步 事 件 处 理 时 ， 能 够 监控 文件 的 恋 取 进 度 ， 这 对 于 谈 取 大 文件 、 碍 找 错误 和 预测 
该 取 完 成 时 间 非 常 实用 。 

onloadstart 和 onprogress 事件 可 用 于 监控 谈 取 进度 。 

以 下 实例 演示 了 如 何 通过 显示 进度 条 来 监控 该 取 状 态 。 要 得 看 进度 指示 需 的 实际 效果 ， 
可 答 试 谈 取 大 文件 。 





























代码 清单 21-3: 监控 文件 读 取 进 度 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

«title» I fibt BE «title» 

«style type="text/css"> 
Zprogress bar { 
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margin: 10px 0; 
padding: 3px; 
border: 1px solid #000; 
font-size: 14px; 
color:#FFF; 
clear: both; 
opacity: 0; 
-moz-transition: opacity 1s linear;/*Chrome*/ 
-o-transition: opacity ls linear; /*Opera*/ 
-Webkit-transition: opacity 1s linear; /*Firefox */ 
j 
Zprogress bar.loading { opacity: 1.0; } 
Zprogress bar .percent { 
background-color: #00F; 
height: auto; 
width: 0; 
j 
</style> 
</head> 
<body> 
<input type="file" id="files" name="file" /> 
«button onclick='"abortRead0;"> 取 消 谈 取 文件 </button> 
«div 1d="progress bar"> 
«div class="percent">0%</div> 
</div> 
«script type="text/Javascript"> 
var reader; 
var progress = document.querySelector(' percent"); 
function abortRead() { reader.abort(); } /取消 读 取 文件 
/错误 处 理 
function errorHandler(evt) { 
switch(evt.target.error.code) 1 
case evt.target.errorNOT FOUND ERR: 
alert( X f F2 dk $1); 
break; 
case evt.target.error NOT READABLE ERR: 
alert(' 文 件 不 能 读 取 !"); 
break; 
case evt.target.error ABORT ERR: 
break; 
default: 
alert(' 谈 取 文 件 时 ， 发 生 错误 ! 7); 





}; 
} 
function updateProgress(evt) { 


// evt 是 一 个 进度 事件 . 
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if (evt.lengthComputable) 1 
var percentLoaded = Math.round((evt.loaded / evt.total) * 100); 
// 增 加 进度 条 的 长 度 
if (percentLoaded < 100) 1 
progress.style.width = percentLoaded + '%'; 
progress.textContent = percentLoaded + '%'; 


j 


j 
function handleFileSelect(evt) { 


/选择 新 的 文件 ， 服 务 进度 指示 
progress.style.width = '0%'; 





progress.textContent = '0%'; 
reader = new FileReader();// 创 建 FileReader 对 象 
reader.onerror = errorHandler; / 读 取 操作 失败 时 和 触发 
/ 读 取 操作 过 程 中 触发 
reader.onprogress — updateProgress; 
reader.onabort = function(e) { alert('File read cancelled"); 1; // 读 取 操作 被 中 断 时 触发 
/ 读 取 操作 开始 时 触发 
reader.onloadstart = function(e) { document.getElementById('progress bar').className = 'loading'; }; 
1/ 读 取 操作 成 功 时 触发 
reader.onload = function(e) { 
/结束 时 ， 确 保 进 度 条 显示 100% 
progress.style.width = '10094'; 














progress.textContent = '10094'; 
setTimeout("document.getElementById('progress bar').className-";", 2000); 
j 
reader.readAsBinaryString(evt.target.files[0]); // 读 取 文件 二 进 制 码 
j 
document.getElementByld('files").addEventListener('change', handleFileSelect, false); /监听 文件 选择 
</script> 





</body> 
</html> 
代码 在 Firefox 浏览 器 中 的 显示 效果 如 图 21-4 PR. 


| 
fu : 








图 21-4 监控 文件 读 取 进度 
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| 21.4 基于 EasyWebSocket 的 实时 聊天 室 


EasyWebSocket 是 一 个 封装 了 WebSocket API 的 JavaScript 库 ， 大 大 简化 了 WebSocket 应 
用 的 开发 。 

如 条 选择 使 用 WebSocket 友 送 信息 a 到 所 有 连接 的 客户 闹 ， 但 是 不 想 费 尽 周 折 配 置 Socket 
服务 器 ， 那 么 应 选择 EasyWebSocket， 只 需要 简单 的 代码 就 能 实现 上 述 的 需求 。 

新 建 一 个 Web 页 面 ， 将 下 面 的 代码 复制 到 页 面 中 ， 和 直接 打开 观看 效果 。 























«script src-"http://easywebsocket.org/easy WebSocket.min.js"7«/script^ 
<script> 
var socket = new Easy WebSocket("ws://example.com/resource"); 
socket.onopen = function() ( socket.send("hello world!") } 
socket.onmessage = function(event) í alert("received "+ event.data) } 
</script> 








EasyWebSocket 是 一 个 发 送信 息 到 web 页 面 的 WebSocket rP im LH. WREE 
websocket 相关 的 应 用 ， 它 能 满足 你 90% 的 需求 。 同 时 Easy WebSocket 已 经 处 理 了 兼容 性 问 
Ju HREH, Hum: 

第 一 步 : 连接 socket 到 指定 的 URL. 

第 二 步 : 通过 socket 的 send0 方 法 发 送 的 内 容 将 被 传递 给 所 有 连接 到 该 URL 的 socket. 

如 果 想 使 用 EasyWebSocket， 可 以 从 https://github.com/jeromeetienne/EasyWebsocket 下 
载 。 在 下 载 的 压 斩 包 中 作者 给 出 了 一 个 在 线 聊 天 的 演示 Chat demo, ARWR 21-5 Bron 


























Chat demo on EasyWebSocket 








Status: Connected Channel: wsanywhere-chat 


demo on EssyHebSocket! 


user-3334 - A Chat 
user-TAE8 : 简单 、 方便。 ERR. 


Lien 








to change the usernzme (like this} 


图 21-$ Chat demo 在 两 个 浏览 器 界面 交互 的 效果 


代码 清单 21-4: 聊天 室 界 面 的 实现 
«IDOCTYPE html» 
<html> 
<head> 
<link rel="stylesheet" href="css/chat main.css"/> 
<!-- json2 is included because some browsers doesnt have it (e.g. ie8)  --> 


一 111 


«script src-"js/]son2.js"«/script^ 
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J 
J 


1， 


] 
«script src-"js/JQuery.url.js" »«/script^ 


«script src-"js/easy WebSocket.min.]s"7«/script^ 


«script src-"js/jquery-1.6.4.js"—«/script^ 


«script src-"js/jquery.tmpl.min.js"^«/script^ 


" 


«script src-"j 


</head> 
<body> 
<div id="container"> 
<div class="header"> 
<h1>Chat demo on Easy WebSocket</h1> <hr/> 
<div class="statusContainer"> 


s/main.js"></script> 


<span class="label">Status: </span> 

<span class="status value">Connecting</span> 

<span class="label">Channel: </span> 

«span class="channel value"">Unknown</span> 
</div> 


<div class 


—" 


userContainer"> 

«span class="label">Username: </span> 

<span class=" 
«input class="editButton" type="button" value=" Edit" /> 

</div> 

</div> 

<div class="chatArea"> </div> 

«script class-"tmplChatMessage" type="text/x-jquery-tmpl"> 

<div> 


<span class="username">$ {username }</spar> : 


username value">Unknown</span> 


«span class="message">$ {message }</span> 

</div> 

</script> 

<script class="tmplChatJoin" type="text/x-jquery-tmpl"> 

<div> 
<span class="username">$ {username }</span> 
<span>just joined.</span> 

</div> 

</script> 

<script class="tmplChatRename" type="text/x-jquery-tmpl"> 

<div> 


<span class 


LM 


oldUsername username"»$ (oldUsername] «/span- 
«span-is renamed as</Span> 

«span class-" 
</div> 


</script> 


newUsername username">${newUsername}</span> 


<div class="footer"> 
<form id="chat-form" action="#"> 
<input class="input" id="chat-input" type="text" /> 
«input class="submit" id="chat-submit" type="submit" value=" Send" /> 
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</form> <hr/> 
Set <code>channel</code> to change the channel, and <code>user</code> to change the username 
(like «a href="?channel=foo&user=bar">this</a>) </div> 

</div> 

</body> 

</html> 


下 面 是 JavaScript 文件 main.js， 具 有 设置 改变 连接 通道 、 更 改 用 户 名 、 在 线 聊 天 等 功 
能 。 代 人 码 如 下 。 











var ChatAnywhere = function(){ 
var channelName = jQuery.url.param("channel") || "wsanywhere-chat"; 
var username = jQuery.url.param("user") || "user-"+Math.floor(Math.random()*9999); 
// TODO put that in jQuery ? what is this ? obsolete ? 
varstatusE| = document.getElementById("chat-status") 
var textAreaE] = document.getElementBylId("chat-textarea") 
var usernameEl - document.getElementById("chat-username") 
var formEI = document.getElementById("chat-form"); 
var inputEI = document.getElementById("chat-input") 
var submitEl = document.getElementById("chat-submit"); 
var setUsername = function(username) ( 
jQuery("Zcontainer .header .username").empty().text(username) 
j 
setUsername(username) 
jQuery("Zcontainer .header .channel.value").text(channelName) 
var setStatus- function(status) | j|Query("Zcontainer .header .status").text(status) } 
var updateChatArea = function(tmplClass, tmplData) 1 
$( "Zcontainer ."+ tmplClass).tmpl(tmplData) 
.appendTo("Z container .chatArea"); 
// scroll to the bottom 
var chatAreaEl] = jQuery("Zcontainer .chatArea").get(0); 
chatAreaEl.scroll Top = jQuery("Z container .chatArea").height(); 


j 
var setMessage = function(tmplData) (| updateChatArea("tmplChatMessage", tmplData)j 
var setJoin = function(tmplData) ( updateChatArea("tmplChatJoin", tmplData) } 


var setRename = function(tmplData) | updateChatArea("tmplChatRename", tmplData) | 


jQuery("Zcontainer .header .editButton").click(function()( 
var selector = "Zcontainer .header .username"; 
var oldUsername = jJQuery("Z container .header .username").text(); 
jQuery(selector).empty(); 
jQuery(" «input type-'text'/7").attr(" value", oldUsername).appendTo(selector); 
jQuery(selector- " input").focus(); 
jQuery(selector- " input").blur(function() { 
var newUsername = jQuery(selector-- " input").val(); 
jQuery(" container .footer .input").focus(); 


ifí 'newUsername ) return; 
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setUsername(newUsername); 


sendRename(oldUsername, newUsername) 


+) 
}) 
var socketUrl = "ws://123.com/"+channelName; 
var socket = new Easy WebSocket(socketUtl); 


socket.onopen = function(){ 
setStatus(" Connected"); 
sendJoin(username); 
j 
socket.onmessage- function(event) ( 
var event = JSON.parse(event.data); 
//console.log("event", event) 
if( event.type == "message" )1 
setMessage(event.data); 
velse if( event.type == "join" )1 
setJoin(event.data); 
velse if( event.type == "left" )1 
velse if( event.type == "rename" )1 
setRename(event.data); 
:else//console.log("unhandled event in socket message") } 
j 
socket.onclose = function() | setStatus("Closed"); } 
jQuery("Z container .footer form").submit(function() { 
var username- jQuery("Zcontainer .header .username").text() 
var message- inputEl.value; 
if( !message ) return false; 
sendMessage(username, inputEl.value); 
inputEl.value- ""; 
return false; 
+) 
var socketSend = function(data) { 
//console.log("socketSend", data) 
socket.send(JSON.stringify(data)); 


j 
var sendMessage = function(username, message)1 
socketSend( ( 
type  : "message", 
data :{ 
username: username, 
message : inputEl. value 
j 
j; 
j 


var sendJoin- function(username)( 
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socketSend({ 
type — : "join", 
data — : ( username: username, | 
j); 
j 
var sendLeave- function(username) ( 
socketSend( ( 
type  : "leave", 
data — : ( username: username, | 
用; 
j 
var sendRename- function(oldUsername, newUsername) 1 
socketSend( ( 
type  : "rename", 
data :{ 
newUsername: newUsername, 
oldUsername: oldUsername 
j 
j); 
j 


j 
jQuery(function() | var chat= new ChatAnywhere(); 1) 


| 21.5 ”图片 墙 


在 实际 开发 中 ， 可 能 很 少 用 到 单独 某 一 种 CSS3 的 变换 操作 ， 而 是 使 用 多 种 变换 相 结 
合 ， 以 设计 复杂 炫目 的 效 末 。 

代码 21-6 绽 合 使 用 移动 、 缩 放 、 旋 转 等 图 数 来 控制 元 素 ， 而 没有 使 用 jQuery 等 其 他 
JavaScript 库 实现 图 片 增 效果 。 实 例 中 图 厂 可 以 随 总 地 在 背景 上 摊 放 ， 当 上限 标 移动 到 图 请 
上 ， 图 片 会 日 动 垂直 摆 放 ， 且 处 于 当前 位 置 。 效 末 如 图 21-6 Brzn. 




















Q D Rfle//DysEEHTMLS&CSS3& JavaScript? TEE BI/EgPr4d CE3/21/21-5. html 

















图 21-6 图 片 墙 效果 
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代码 清单 21-5: 创建 图 片 墙 
<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title> 图 片 墙 </title> 
«style type="text/css"> 


body { 


} 


background-color: #E9E9E9; 

color: #333; 

font-family:"Times New Roman", Times, serif, 
font-size: 14px; 


a.polaroid { 


j 


display: block; 

text-decoration: none; 

color: #333; 

padding: 10px 10px 20px 10px; 

width: 150px; 

border: 1px solid ZBFBFBF; 

background-color: white; 

z-index: 2; 

font-size: 0.7em; 

-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); 
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); 
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); 
-webkit-transition: -webkit-transform 0.5s ease-in; 


a.polaroid:hover, 


a.polaroid:focus, 


a.polaroid:active 1 


j 


z-index: 999; 

border-color: 26A6A6A; 

-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); 
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); 
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); 
-webkit-transform: rotate(Odeg); 

-moz-transform: rotate(O0deg); 

transform: rotate(Odeg); 


.polaroid img { 


aimg 1 


margin: 0 0 15px; 
width: 150px; 
height: 150px; 


border: none; 
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display: block; 

j 

.photo-album 1 
position: relative; 
width: 8096; 
margin: 0 auto; 
max-width: 70em; 
height: 450px; 
margin-top: 5em; 
min-width: 800px; 
max-width: 900px; 

j 


.photo-album .polaroid 1 position: absolute; } 


.photo-album.small 1 
width: 75px; 
padding: 6px 6px 12px 6px; 
font-size: 0.6em; 


j 

.photo-album .small img { 
width: 75px; 
height: 75px; 

j 


.photo-album.medium { 
width: 200px; 
padding: 13px 13px 26px 13px; 
font-size: 0.8em; 
j 
.photo-album .medium img 1 
width: 200px; 
height: 200px; 
j 
.photo-album .large 1 
width: 300px; 
padding: 20px 20px 30px 20px; 
font-size: 1em; 
j 
.photo-album .large img 1 
width: 300px; 
height: 300px; 
j 
.photo-album .Imgl 1 
bottom: 10px; 
right: 365px; 
-Webkit-transform: rotate(10deg); 
-moz-transform: rotate(10deg); 
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transform: rotate( 10deg); 


.photo-album .img2 1 


j 


top: 50px; 

right: 20px; 

-webkit-transform: rotate(-4deg); 
-moz-transform: rotate(-Adeg); 
transform: rotate(-4deg); 


.photo-album .img3 { 


} 


left: 400px; 

top: 0; 

-webkit-transform: rotate(-5deg); 
-moz-transform: rotate(-5deg); 
transform: rotate(-5deg); 


.photo-album .img4 1 


j 


top: 10px; 

left: 495px; 

-Webkit-transform: rotate(-20deg); 
-moz-transform: rotate(-20deg); 
transform: rotate(-20deg); 


.photo-album .img5 1 


j 


bottom: 0; 

right: 0; 

-webkit-transform: rotate(1deg); 
-moz-transform: rotate(1deg); 
transform: rotate( 1deg); 


.photo-album .img6 1 


j 


bottom: 10px; 

right: 156px; 
-Wwebkit-transform: rotate(6deg); 
-moz-transform: rotate(6deg); 
transform: rotate(6deg); 


.photo-album .img7 1 


j 


bottom:0; 

left:400px; 

-Webkit-transform: rotate(-10deg); 
-moz-transform: rotate(- 10deg); 
transform: rotate(-10deg); 


.photo-album .img$ 1 


bottom: -20px; 
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left: 700px; 
-webkit-transform: rotate(-8deg); 
-moz-transform: rotate(-8deg); 
transform: rotate(-8deg); 

j 

.photo-album .img9 { 
bottom: 0; 
left: 0; 
-webkit-transform: rotate(-8deg); 
-moz-transform: rotate(-8deg); 
transform: rotate(-8deg); 

j 

.photo-album .img10 { 
top: 0; 
left: 20px; 
-webkit-transform: rotate(8deg); 
-moz-transform: rotate(8deg); 
transform: rotate(8deg); 


j 

.photo-album .imgl11 1 
top: 0; 
right: 0; 


-Wwebkit-transform: rotate(-8deg); 
-moz-transform: rotate(-8deg); 
transform: rotate(-8deg); 

j 

.photo-album .1mg12 1 
top: 0; 
left: 680px; 
-Wwebkit-transform: rotate( 18deg); 
-moz-transform: rotate(18deg); 
transform: rotate( 18deg); 

j 

.photo-album .img13 { 
bottom: -20px; 
right: 630px; 
-Wwebkit-transform: rotate(4deg); 
-moz-transform: rotate(4deg); 
transform: rotate(4deg); 

j 

.photo-album .1mg14 1 
top: 90px; 
left: 430px; 
-Wwebkit-transform: rotate(15deg); 
-moz-transform: rotate(15deg); 
transform: rotate( 15deg); 
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j 
.photo-album .img15 { 


left:176px; 
top:20px; 
-Wwebkit-transform: rotate(-8deg); 
-moz-transform: rotate(-8deg); 
transform: rotate(-8deg); 
j 
</style> 
</head> 
<body> 
<div class 


LM 


photo-album"^ 

«a href-"" class-"large polaroid imgl"><img src-"images/Tulips.jpg" alt=""> 盛 开 的 郁金香 </a> 
«a href-"" class-"polaroid img2"><img src-"images/Penguins.jpg" alt=""> FAK n] 22 KAR </a> 
«a href-"" class-"small polaroid img3"><img src-"images/Lighthouse.jpg" alt-" "35 AIX] 3«/a» 
«a href-"" class-"medium polaroid img4" «img src-"images/Koala.jpg" alt=""> 可 爱 的 考 拉 </a> 
«a href-"" class-"polaroid img5"><img src-"images/Jellyfish.jpg" alt="">% N HJ7K BE«/a» 


LM 


«a href-"" class-"polaroid img6" «img src-"images/imgll.jpg" alt=""> Jt AAM </a> 


—" 


<a href-"" class="polaroid img7"><img src="images/img10.jpg" alt=""> KLTE </a> 


LM 


<a href="" class-"small polaroid img8"><img src-"images/img9 jpg" alt-" "5:18 [52 26 IN] 9 H-«/a 


LM 


«a href-"" class-"medium polaroid img9"><img src-"images/img8.jpg" alt=""> 冰 封 的 世界 </a> 
«a href-"" class-"polaroid img10"><img Src="images/img7.jpg" alt=""> MJ </a> 
«a href-"" class-"small polaroid img11"><img src-"images/img6.jpg" alt=""> 秋 天 的 树叶 </a> 
«a href-"" class-"small polaroid img12"><img src-"images/img5.jpg" alt=""> F IEA </a> 
<a href-"" class="small polaroid img13"><img src-"images/img4.jpg" alt=""> IEA </a> 
<a href-"" class="small polaroid img14"><img src-"images/Hydrangeas.jpg" alt=""> 绽 放 的 绣球 </a> 
<a href-"" class="polaroid img15"><img src-"images/Desert.jpg" alt-" "752513 7J </a> 

</div> 
</body> 
</html> 


| 21.6 幻灯 片 播放 


本 节 将 使 用 CSS3 实现 一 个 约 灯 片 播 放 效 果 〈 不 需要 任何 JavaScript). ZJ HERSE A 
导航 按钮 、 图 片 说 明 以 及 渐变 链接 。 效 果 如 图 21-7 所 示 。 

















图 21-7 图 片 切换 
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代码 清单 21-6: 实现 幻灯 片 播放 的 完整 HTML 代码 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
«title» E Fr) title» 
<link href-"css/main.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<!-- Slider Setup --> 
<input checked type=radio name=slider id=slide1 /> 
<input type=radio name=slider id=slide2 /> 
<input type=radio name=slider id=slide3 /> 
<input type=radio name=slider 1d=slide4 /> 
<!-- The Slider --> 
<div 1d=slides> 
«div 1d=overflow> 
«div class=inner> 
<article> 
«div class=info> 
<h3>Koala</h3> 
by «a href="">Phascolarctos cinereus</a></div> 
«img src="images/Koala.jpg"/> </article> 
<article> 
«div class-info^ 
<h3>Jellyfish</h3> 
by «a href="">Invertebrates</a></div> 
«img src-"1images/Jellyfish.jpg"/^ </article> 
«article 
«div class-info^ 
<h3>Penguins</h3> 
by «a href="">the Antarctic Pole Penguins</a></div> 
<img  src-"images/Penguins.]pg"/^ </article> 
<article> 
<div class=info> 
<h3>Desert</h3> 
by «a href="">Land desertification</a></div> 
«img src="images/Desert.jpg"/> </article> 
</div> 
<!-- inner --> 
</div> 
<!-- #overflow --> 
</div> 
<!-- Controls and Active Slide Display --> 
<div id=controls> 
<label for=slide1></label> 
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<label for=slide2></label> 
<label for=slide3></label> 
<label for=slide4></label> 

</div> 

<!-- #controls --> 

<div id=active> 
<label for=slide1></label> 
<label for=slide2></label> 
<label for=slide3></label> 
<label for=slide4></label> 

</div> 

<!-- #active --> 

</article> 

</body> 

</html> 


下 面 代码 为 实现 约 灯 片 播放 的 CSS 代码 。 包 括 页 面 的 布局 、 播 放 控 制 以 及 幻灯 片 切换 


A E. 


(charset "utf-8"; 
/* CSS Document */ 
#slider { text-align: center; } 
label, a { 
color: teal; 
cursor: pointer; 
text-decoration: none; 
j 
label:hover, a:hover (color: #000 'important; } 
/* Slider Setup */ 
input { display: none; } 
Zslidel:checked ~ Zslides .inner { margin-left:0; | 
#slide2:checked ~ Zslides .inner { margin-left:- 10096; } 
#slide3:checked ~ Zslides .inner { margin-left:-20096; } 
#slide4:checked ~ Zslides .inner { margin-left:-30096; } 
#slide5:checked ~ Zslides .inner { margin-left:-40096; } 
Zoverflow 1 
width: 10095; 
overflow: hidden; 
j 
article img { width: 10096; } 
Zslides inner { 
width: 500%; 
line-height: 0; 
j 
#slides article { 
width: 20%; 
float: left; 
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j 
/* Slider Styling */ 
/* Control Setup */ 
Zcontrols 1 
margin: -25% 0 0 0; 
width: 100%; 
height: 20px; 
j 
Zactive { 
margin: 23% 0 0; 
text-align: center; 
j 
#active label 1 
-Webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
display: inline-block; 
width: 10px; 
height: 10px; 
background: #bbb; 
j 
Zslidel:checked ~ Zactive label:nth-child(1), 
Zslide2:checked ~ Zactive label:nth-child(2), 
Zslide3:checked ~ #active label:nth-child(3), 
Zslide4:checked ~ Zactive label:nth-child(4) { 
background: #333; 
border-color: #333 !important; 


j 

/* [nfo Box */ 

info { 
line-height: 20px; 
margin: 0 0 -150%; 
position: absolute; 
font-style: italic; 
padding: 30px 30px; 
opacity: 0; 
color: #000; 
text-align: left; 

j 

/* Slider Styling */ 

#slides { 


margin: 45px 0 0; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
box-shadow: 1px 1px 4px #666; 
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padding: 196; 
background: #fff; 
background: rgb(252,255,244); /* Old browsers */ 
background: -moz-linear-gradient(top, | rgba(252,255,244,1) 096, rgba(219,218,201,1) 100%); /* 
FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(096,rgba(252,255,244,1)), color- 
stop(10096,rgba(219,218,201,1))); /* Chrome,Safari4-- */ 
background: -webkit-linear-gradient(top, rgba(252,255,244,1) 096,rgba(219,218,201,1) 100%); /* 
ChromelO0-,Safari5.1-- */ 
background: -o-linear-gradient(top, rgba(252,255,244,1) 096,rgba(219,218,201,1) 100%); /* Opera 
11.107 */ 
background: -ms-linear-gradient(top, ^ rgba(252,255,244,1) 096,rgba(219,218,201,1) 10096); /* 
IE10- */ 
background: linear-gradient(top, rgba(252,255,244,1) 096,rgba(219,218,201,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#fcfff4', endColorstr~#dbdac9' Gradient 
Type-0 ); /* IE6-9 */ 
j 
/* Animation */ 
#slides .inner { 
-webkit-transform: translateZ(0); 
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ 


-Webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ 
j 
Z'slidel:checked ~ Zslides article:nth-child(1) .info, 
Z'slide2:checked ~ Zslides article:nth-child(2) .info, 
Z'slide3:checked ~ Zslides article:nth-child(3) .info, 
ZslideA:checked ~ Zslides article:nth-child(4) .info { 
opacity: 1; 
-webkit-transition: all 1s ease-out 0.6s; 
-moz-transition: all 1s ease-out 0.6s; 
-o-transition: all 1s ease-out 0.6s; 
transition: all 1s ease-out 0.6s; 
j 
/* Respond Options */ 
body{ padding: 0 480px; | 
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| 21.7 手风琴 式 垂 直 菜 单 


本 节 将 创建 一 个 很 酷 的 手 风 蕉 式 垂 直 菜 单 ， 如 图 21-8 所 示 。 当 使 用 鼠标 单 击 菜单 项 
时 ， 沫 单 可 以 目 由 伸缩 ， 且 当前 沫 单项 突出 显示 。 














7 xRU ENS x V3 


€ > QU [3 123.com:8000/21-7.html&- uw B 




















图 21-8 -FUSI CE E SER 


像 往 常 一 样 ， 首 先 创 建 HIML。 下 面 是 完整 的 HTML 代码 ， 如 图 21-8 显示 的 菜单 只 包 
售 一 级 水 平 菜 单 。 整 个 菜单 使 用 ul 元 素 建 立 。 











代码 清单 21-7: 垂直 菜单 HTML 代码 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> T XU XE EL title» 
<link rel="stylesheet" href-"css/menu.css" type="text/css" > 
</head> 
<body> 
<div class="container"> 
<ul id="nav"> 
<li><a href="#">} H Fide ai» 
<li><a href="#" class="sub" tabindex="1"> 河北 省 </a> 
«ul» 
<li><a href="#"><img src-"images/empty.png" 入 石家庄 </a></1i> 
<li><a href="#"><img src-"images/empty.png" /^2& Œ at «/a»«/li» 
<li><a href="#"><img src-"images/empty.png" /2318: M rii «/a»«/li 
<li><a href="#"><img src-"images/empty.png" /^Tk xe ri «/a»«/li» 
<li><a href="#"><img src-"images/empty.png" /> 张家口 </a></]i> 
</ul> 
</li> 


<li><a href="#" class="sub" tabindex="1"> 山东 省 </a> 
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«ul» 
<li><a href="#"><img src-"images/empty.png" 入 济南 </a></1i> 
<li><a href="#"><img src-"images/empty.png" /7 5g«/a»«/li» 
<li><a href="#"><img src-"images/empty.png" 这 烟 合 </a></i> 
<li><a href="#"><img src-"images/empty.png" /714E3;«/a»«/li» 
<li><a href="#"><img src-"images/empty.png" 这 淄博 </a></i> 


</ul> 

</li> 

<li><a href="#" class="sub" tabindex="1">}L 244 «/a» 
«ul» 


<li><a href="#"><img src-"images/empty.png" /7 95 5i «/a»«/li 
<li><a href="#"><img src-"images/empty.png" /72j ^|«/a»«/li» 
<li><a href="#"><img src-"images/empty.png" /> 无 锡 </a></i> 
<li><a href="#"><img src-"images/empty.png" /735 ^| «/a»«/li» 
<li><a href="#"><img src-"images/empty.png" /> 徐州 </a></i> 


</ul> 

</li> 

<li><a href-"Z" class="sub" tabindex="1"> 浙 江 省 </a> 
<ul> 


<li><a href="#"><img src="images/empty.png" /> 杭州 </a></1i> 
<li><a href="#"><img src-"images/empty.png" /> T Y%</a></li> 
<li><a href="#"><img src-"images/empty.png" />54%</a></li> 
<li><a href="#"><img src-"images/empty.png" 这 绍兴 </a></i> 
<li><a href="#"><img src-"images/empty.png" /7J 1l1«/a»«/li» 


</ul> 

</li> 

<li><a href="#" class="sub" tabindex="1"> 广 东 省 </a> 
«ul» 


<li><a href="#"><img src-"images/empty.png" /> 广州 </a></li> 
<li><a href="#"><img src-"images/empty.png" 这 深圳 </a></i> 
<li><a href="#"><img src-"images/empty.png" /> 湛江 </a></li> 
<li><a href="#"><img src-"images/empty.png" /»X&ifj«/a»«/li» 
<li><a href="#"><img src-"images/empty.png" /7il|3-«/a»«/li» 
</ul> 
</li> 
</ul> 
</body> 


Be p, DEEA CSS 样式 (menu.css)。 在 CSS 样式 中 主要 通过 transition 属性 
来 实现 某 单 的 伸缩 功能 。 人 代码 如 下 。 


(charset "utf-8"; 

/* CSS Document */ 

#nav { 
border:3px solid #3e4547; 
box-shadow:2px 2px 8px #000000; 
border-radius:3px; 
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-moz-border-radius:3px; 
-webkit-border-radius:3px; | 
#nav, #nav ul { 
list-style:none; 
padding:0; 
width:200px; } 
#nav ul { 
position:relative; 
z-index:-1; } 
#nav li { 
position:relative; 
z-index:100; } 
#nav ul li { 
margin-top:-23px; 
-moz-transition: 0.4s linear 0.4s; 
-ms-transition: 0.4s linear 0.4s; 
-o-transition: 0.4s linear 0.4s; 
-webkit-transition: 0.4s linear 0.4s; 
transition: 0.4s linear 0.4s; } 
#nav lia { 
background-color: #C1AAF7; 
color:#000; 
display:block; 
font-size: 12px; 
font-weight:bold; 
line-height:28px; 
outline:0; 
padding-left: 1 5px; 
text-decoration:none; } 
#nav ul li a { 
background-color: #DCEC84; 
border-bottom: 1px solid #ccc; 
color:#000; 
font-size: 11px; 
line-height22px; | 
#nav ul li a:hover { 
background-color: #FFF; 
color:#444; } 
#nav ul li a img { 
border-width:0px; 
height: 16px; 
line-height:22px; 
margin-right:5px; 
vertical-align:middle; 
width: l6px; | 
#nav a.sub:focus 1 
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background: #D5D1FC; 
outline:0; ! 

#nav a:focus ~ ul li ( 
margin-top:0; 
-moz-transition: 0.4s linear; 
-ms-transition: 0.4s linear; 
-o-transition: 0.4s linears; 
-webkit-transition: 0.4s linears; 


transition: 0.4s linear; } 
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尊敬 的 读者 朋友 : 
感谢 您 选择 我 们 出 版 的 图 书 ! 我 们 愿 以 书 为 媒 与 您 做 朋友 ! 我 们 诚 妇 地 邀请 您 加 入 : 


“机 工 出 版 社 。 计 算 机 分 社 书 友 会 ” 
以 书 结缘 ， 以 书 会 友 
加 入 “ 书 友 会 ”， 您 将 : 
* “第 一 时 间 获 知 新 书信 息 、 了 解 作 者 动态 ; 


* ”与 书 友 们 在 线 品 书评 书 ， 谈 天 说 地 ; 
太 “” 受 邀 参与 我 社 组 织 的 各 种 沙龙 活动 ， 会 员 联 请 ; 
太 ” 受 邀 参与 我 社 作 者 和 合作 伙伴 组 织 的 各 种 技术 培训 和 讲座 ; 
* ”获得 “ 书 友 达 人 ”资格 (积极 参与 互动 交流 活动 的 书 友 )， 参 与 每 月 5 个 名 额 
的 “ 书 友 试 读 赠阅 ”活动 ， 获 得 最 新 出 版 精品 图 书 1 本 。 
如 何 加 入 “机 工 出 版 社 。 计 算 机 分 社 书 友 会 ” 
两 步 操 作 轻 松 加 入 书 友 会 

Stepl 


访问 以 下 任 一 网 址 : 

* ”新 浪 官方 微 博 : http://weibo.com/empjsj 

* ”新 浪 官 方 博客 : http://blog.sina.com.cn/cmpbookjsj 
* ”腾讯 官方 微 博 : http://t.qq.com/jigongchubanshe 
* ”腾讯 官方 博客 : http:/2399929378.qzone.qq.com 



































Step2 
找到 并 点 击 调查 问卷 链接 地 址 (通常 位 于 置顶 位 置 或 公告 栏 )， 完 整 填写 调查 问卷 
即 可 。 
联系 方式 
通信 地 址 : 北京 市 西城 区 百 万 庄 大 街 22 号 联系 电话 : 010-88379750 
机 械 工业 出 版 社 计 算 机 分 社 传 真 : 010-88379736 
邮政 编码 : 100037 电子 邮件 : cmp itbook(2163.com 


| WAK ERILE Dmt: http://weibo.com/cmpjsj 
| 第 一 时 间 了 解 新 书 动态 ， 获 知 书 友 会 活动 信息 ， 与 读者 、 作 者 、 编 辑 们 互动 交流 ! 


在 线 互动 交流 平台 


B AmE: http:/weibo.com/cmpjsj 
' 办 网 : http://site.douban.com/139085/ ' 
! 读 者 信箱 : cmp_itbook@163.com ! 


LIII d 


HTMES, C883. JavaScript 
JF A I 


I E MU I ET uU Even 


全 书 共 分 为 四 部 分 。 第 一 部 分 详细 介绍 了 HTML5 的 各 方面 知识 ， 第 二 部 分 深入 讲解 了 
CSS3 相 关 知 识 ， 第 三 部 分 介绍 了 JavaScript 动 态 程 序 ， 第 四 部 分 列举 了 HTML5 与 CSS3 的 
典型 范例 。 





书 中 实例 代码 可 在 
RETR. 





地 址 : 北京 市 百 万 庄 大 街 22 号 
邮政 编码 : 100037 

电话 服务 

社 服务 中 心 : 010-88361066 

销售 一 部 : 010-68326294 

销售 二 部 :-010-88379649 

读者 购书 热线 : 010-88379203 

| mas) EES 

AMI. httpi//www.cmpedu.com 

ILLE: http//www.cmpbook.com ISBN 978-7-111-45599-6 


机 工 官 博 : http://weibo.com/cmp1952 i —— TENL- Pax 2 
封面 无 防伪 标 均 为 盗版 | ”策划 编辑 〇 车 忱 / 封面 设计 QO 〇 EX 2994 e 


uos" 


SBN 978-7-111-435399-6 


455996 
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